0

我在这里有一些简单的 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;
}
4

2 回答 2

1

实际上你应该使用 translate3d(x,y,0); 启用 GPU 加速。许多设备上的动画会更流畅。

于 2012-11-30T19:22:43.273 回答
0

只有 Firefoxtransform不带前缀才能理解。不仅在@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); }
  }
于 2012-11-30T14:16:31.553 回答