Pulsing Heart CSS-Animation
Ich arbeite nur mit CSS an einem animierten Herzen.
Ich möchte, dass es 2-mal pulsiert, eine kleine Pause macht und sie dann noch einmal wiederholt.
Was ich jetzt habe:
small ==> big ==> small ==> repeat animation
Was ich will:
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
Wie kann ich es tun
Mein 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;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
<img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>
Siehe auchdiese Geige.