I have an animated element on a webpage that is to rotate once and then stop.
This works fine in chrome/ie but in firefox the loop is infinite...
-webkit-animation:.75s rotateLast ease;
-webkit-animation-fill-mode:forwards;
-moz-animation:.75s rotateLast ease;
-moz-animation-fill-mode:forwards;
animation:.75s rotateLast ease;
animation-fill-mode:forwards;
Can anybody see what I may be doing wrong or has anybody experience this before?
@-webkit-keyframes rotateFirst {
0% {-webkit-transform:rotate(180deg);}
100% {-webkit-transform:rotate(0deg);opacity:1}
}
@-webkit-keyframes rotateLast {
0% {-webkit-transform:rotate(-180deg);}
100% {-webkit-transform:rotate(0deg);opacity:1}
}
@keyframes rotateFirst {
0% {transform:rotate(180deg);}
100% {transform:rotate(0deg);opacity:1}
}
@keyframes rotateLast {
0% {transform:rotate(-180deg);}
100% {transform:rotate(0deg);opacity:1}
}
@-moz-keyframes rotateFirst {
0% {transform:rotate(180deg);}
100% {transform:rotate(0deg);opacity:1}
}
@-moz-keyframes rotateLast {
0% {transform:rotate(-180deg);}
100% {transform:rotate(0deg);opacity:1}
}
Add:
animation-iteration-count:1;
-moz-animation-iteration-count:1;
-webkit-animation-iteration-count:1;
The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments