Я працюю над анімованим серцем лише із CSS.
Я хочу, щоб він пульсував 2 рази, зробив невелику перерву, а потім повторив ще раз.
Що я маю зараз:
small ==> big ==> small ==> repeat animation
До чого я йду:
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
Як я можу це зробити?
Мій код:
#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;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
<img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>
Дивіться також цю Скрипку .