css3 动画在 Firefox 中不起作用，但在 chrome 中起作用答案

【问题标题】：css3 animation not working in firefox but works in chromecss3 动画在 Firefox 中不起作用，但在 chrome 中起作用
【发布时间】：2016-03-10 15:01:43
【问题描述】：

我的代码如下

 @-webkit-keyframes arrow-jump2 {
  0%   { opacity: 1;}
  100% { opacity: 1; 
        -webkit-transform: translateX(258px);
        -moz-transform: translateX(258px);
        -0-transform: translateX(258px);
        transform: translateX(258px);
    } 
}
.arrow3 {
  -webkit-animation: arrow-jump2 3s forwards; /* Safari 4+ */
  -moz-animation:    arrow-jump2 2s forwards; /* Fx 5+ */
  -o-animation:      arrow-jump2 2s forwards; /* Opera 12+ */
  animation:         arrow-jump2 2s forwards; /* IE 10+, Fx 29+ */
}

上面的代码在 chrome 上可以正常工作，但在 firefox 上不行

【问题讨论】：

使用标准@keyframes。如果你只使用@-webkit-keyframes，它只能在 Webkit 驱动的浏览器中工作。
什么是-0-transform？他们是否已经启动了零浏览器？
抱歉没注意，应该是o-opera吧
那么 mozila man 有什么问题

标签： html css animation

【解决方案1】：

 @-webkit-keyframes arrow-jump2 {
  0%   { opacity: 1;}
  100% { opacity: 1; 
        -webkit-transform: translateX(258px);
        -moz-transform: translateX(258px);
        -0-transform: translateX(258px);
        transform: translateX(258px);
    } 
}
 @keyframes arrow-jump2 {
  0%   { opacity: 1;}
  100% { opacity: 1; 
        -webkit-transform: translateX(258px);
        -moz-transform: translateX(258px);
        -0-transform: translateX(258px);
        transform: translateX(258px);
    } 
}
.arrow3 {
  -webkit-animation: arrow-jump2 3s forwards; /* Safari 4+ */
  -moz-animation:    arrow-jump2 2s forwards; /* Fx 5+ */
  -o-animation:      arrow-jump2 2s forwards; /* Opera 12+ */
  animation:         arrow-jump2 2s forwards; /* IE 10+, Fx 29+ */
}

firefox 不需要 -webkit-

【讨论】：