CSS анимация в импульсный раздел изображения

Я использую анимацию CSS на простом изображении.
Я хочу, чтобы импульсная анимация была нацелена только на часть изображения.
Как я могу сделать эту импульсную анимацию так, чтобы только текст «Trello» менял непрозрачность?CSS анимация в импульсный раздел изображения

Вот мой код:

.element { 
 
    /*animation-delay: 2s;*/ 
 
    animation: pulse 3s infinite; 
 
    margin: 0 auto; 
 
    display: table; 
 
    margin-top: 50px; 
 
    animation-direction: alternate; 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0.3; 
 
    } 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #e74c3c; 
 
}

<img src="https://d78fikflryjgj.cloudfront.net/images/50b4ebc64391dc394a38e73aed57f0e2/header-logo.png" alt="" class="element" />

View on CodePen

источник

2017-01-16 Penalse

Если вы пытаетесь сделать пульс «Trello», а не значок рядом с ним, вы будете должны использовать два отдельных изображения и просто бросить пульсовой анимацию на изображение с текстом. –

Спасибо за комментарий. Есть ли способ сделать такую же анимацию только с одним изображением? Если нет способа сделать это, тогда я просто делаю это с двумя изображениями. – Penalse

Не уверен, почему это в очереди редактирования - выглядит хорошо для меня. – Stidgeon

Вы можете использовать этот пример для обоих. Надеюсь, это поможет вам.

.pulse { 
    animation: pulse 3s infinite; 
    margin: 0 auto; 
    display: table; 
    margin-top: 50px; 
    animation-direction: alternate; 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
} 

@-webkit-keyframes pulse { 
    0% { 
    -webkit-transform: scale(1); 
    } 
    50% { 
    -webkit-transform: scale(1.1); 
    } 
    100% { 
    -webkit-transform: scale(1); 
    } 
} 

@keyframes pulse { 
    0% { 
    transform: scale(1); 
    } 
    50% { 
    transform: scale(1.1); 
    } 
    100% { 
    transform: scale(1); 
    } 
}

источник

2017-01-16 14:22:13

CSS анимация в импульсный раздел изображения

ответ

Смежные вопросы