CSS3 滑动图像

Question

我这里有一些简单的CSS3动画：http://chooseavirb.com/strat/。它们在Firefox上工作正常，但在Chrome，Safari或IE中根本不会动画。有人可以在css上借第二双眼睛，摘录在这里（已使用供应商前缀）：

@-webkit-keyframes slideup {
0% {transform: translate(0px, 0px);}
20% {transform: translate(0px,0px);}
25% {transform: translate(0px, -150px);}
45% {transform: translate(0px,-150px);}
50% {transform: translate(0px,-300px);}
70% {transform: translate(0px,-300px);}
75% {transform: translate(0px,-150px);}
95% {transform: translate(0px,-150px);}
100% {transform: translate(0px,px);}
}  
@-moz-keyframes slideup {
0% {transform: translate(0px, 0px)}
20% {transform: translate(0px,0px)}
25% {transform: translate(0px, -150px)}
45% {transform: translate(0px,-150px)}
50% {transform: translate(0px,-300px)}
70% {transform: translate(0px,-300px)}
75% {transform: translate(0px,-150px)}
95% {transform: translate(0px,-150px)}
100% {transform: translate(0px,px)}
}  
@keyframes slideup {
0% {transform: translate(0px, 0px)}
20% {transform: translate(0px,0px) }
25% {transform: translate(0px, -150px)}
45% {transform: translate(0px,-150px) }
50% {transform: translate(0px,-300px) }
70% {transform: translate(0px,-300px)}
75% { transform: translate(0px,-150px)}
95% {transform: translate(0px,-150px)}
100% {transform: translate(0px,px)}
}  
.slideup {
-webkit-animation-name: slideup;
-moz-animation-name: slideup;
-o-animation-name: slideup;
animation-name: slideup;
}

Answer 1

实际上你应该使用 translate3d（x，y，0）; 来启用 GPU 加速。动画在许多设备上会更流畅。

Answer 2

只有 Firefox 才能理解没有前缀transform。定义过渡时，您不仅需要前缀，还需要@keyframes中的前缀。像这样的东西

  @-moz-keyframes slideup {
      0% {  -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% { -moz-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% { -moz-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -moz-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @-webkit-keyframes "slideup" {
      0% {   -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% {  -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% {  -webkit-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% {  -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% {  -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% {  -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% {  -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% {  -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -webkit-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @-ms-keyframes "slideup" {
      0% {   -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% {  -ms-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% {  -ms-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% {  -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% {  -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% {  -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% {  -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% {  -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -ms-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @-o-keyframes "slideup" {
      0% {   -o-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% {  -o-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% {  -o-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% {  -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% {  -o-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% {  -o-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% {  -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% {  -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -o-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @keyframes "slideup" {
      0% {   transform: translate(0px, 0px); }
      20% {  transform: translate(0px,0px); }
      25% {  transform: translate(0px, -150px); }
      45% {  transform: translate(0px,-150px); }
      50% {  transform: translate(0px,-300px); }
      70% {  transform: translate(0px,-300px); }
      75% {  transform: translate(0px,-150px); }
      95% {  transform: translate(0px,-150px); }
      100% { transform: translate(0px,px); }
  }