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 without a prefix。在定义转换时，您不仅需要@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); }
  }

CSS3滑动图像

2 个答案: