[英]CSS bounce animation not working in FF
我有一个通过webkit运行的简单反弹动画,知道为什么该动画不能在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;
}
谢谢!
这是因为您为其他浏览器设置了animation-name
而不是animation
:
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;
}
请注意,如果您使用animation-name
,则必须像这样单独设置其他与动画相关的属性:
-moz-animation-name: bounce;
-moz-animation-duration:1.7s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.