Пульсирующая сердечная анимация CSS ⇐ CSS

[Anonymous]

Я работаю над анимированным сердцем только с CSS.

Код: Выделить всё

small ==> big ==> small ==> repeat animation
< /code>
Что я ичу: < /p>
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
< /code>
Как это сделать?#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
-webkit-transition: opacity 7s ease-in-out;
-moz-transition: opacity 7s ease-in-out;
-o-transition: opacity 7s ease-in-out;
transition: opacity 7s ease-in-out;}

@keyframes heartFadeInOut {
0% {
opacity:1;
}
14% {
opacity:1;
}
28% {
opacity:0;
}
42% {
opacity:0;
}
70% {
opacity:0;
}
}

#heart img.top {
animation-name: heartFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;

}< /code>

[img]https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/2000px-Heart_coraz%C3%B3n.svg.png[/img]
[img]https://media0.giphy.com/media/VlzUkJJzvz0UU/200_s.gif[/img]

См. Также эта скрипкая .

Подробнее здесь: https://stackoverflow.com/questions/347 ... -animation