css - CSS3 スライド画像

Question

ここにいくつかの簡単な CSS3 アニメーションがあります: http://chooseavirb.com/strat/。Firefox では問題なく動作しますが、Chrome、Safari、または IE ではまったくアニメーションしません。誰かがCSSに2番目の目を貸してくれませんか?その抜粋はここにあります(ベンダープレフィックスが利用されています):

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

score 1 · Accepted Answer

実際には translate3d(x,y,0); を使用する必要があります。GPU アクセラレーションを有効にします。多くのデバイスでアニメーションがよりスムーズになります。

score 0 · Accepted Answer

transformプレフィックスなしで理解できるのは Firefox だけです。トランジションを定義するときは、@keyframes だけでなく @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); }
  }

css - CSS3 スライド画像

2 に答える 2

Related

Reference