CSS 反弹动画在 FF 中不起作用

Question

我有一个通过 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;
}

谢谢!

Answer 1

这是因为你为其他浏览器设置了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;
}

Demo .

请注意，如果您使用animation-name，您必须单独设置其他与动画相关的属性，如下所示:

-moz-animation-name: bounce;
-moz-animation-duration:1.7s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;