I have a simple bounce animation working via webkit, any idea why this animation isn't working in FF?
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-6px);}
60% {-webkit-transform: translateY(-3px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-6px);}
60% {transform: translateY(-3px);}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-6px);}
60% {transform: translateY(-3px);}
}
element {
-webkit-animation: bounce 1.7s ease-in-out infinite;
-moz-animation-name: bounce 1.7s ease-in-out;
-ms-animation-name: bounce 1.7s ease-in-out;
-o-animation-name: bounce 1.7s ease-in-out;
animation-name: bounce 1.7s ease-in-out;
}
Thanks!
It's because you set the animation-name
instead of animation
for other browsers:
div {
-webkit-animation: bounce 1.7s ease-in-out infinite;
-moz-animation: bounce 1.7s ease-in-out infinite;
-ms-animation: bounce 1.7s ease-in-out infinite;
-o-animation: bounce 1.7s ease-in-out infinite;
animation: bounce 1.7s ease-in-out infinite;
}
Note that if you use animation-name
you have to set other animation related propeties separately like this:
-moz-animation-name: bounce;
-moz-animation-duration:1.7s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.