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

[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://./nN8Haf[/img]
[img]https://./IIW1KE[/img]

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

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