मैं केवल सीएसएस के साथ एक एनिमेटेड दिल पर काम कर रहा हूँ।
मैं चाहता हूं कि इसे 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>
इस फिडल को भी देखें ।