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 -

css3动画在Firefox中不起作用但在chrome中工作

1 个答案: