css3 動畫在 Firefox 中不起作用，但在 chrome 中有效

Question

我的代碼如下

 @-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

Answer 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-