0

ハードウェアアクセラレーションを使用するcss3アニメーション中に、アニメーションの継続時間を動的に増加させようとしています。javascriptと非ハードウェアアクセラレーションcss3を使用して、アニメーションの継続時間を長くすると、アニメーションが高速化されます。アニメーション化にleftプロパティの代わりにtranslate3dを使用しているので、アニメーションの継続時間を長くしても機能しません。アニメーションがGPUにオフロードされると、cssへの変更は影響を与えないと感じています。変更を加えたときに、GPUのアニメーションを強制的に更新する方法が必要です。

これが私のCSSです。 

@-webkit-keyframes gofast {
 from {
   -webkit-transform: translate3d(0,0,0);
 }
 to {
   -webkit-transform: translate3d(-10240px,0,0);
 }
}

.makeMeFast {
  position:absolute;
  top:0px;
  z-index:0;
  width:12288px;

  -webkit-animation-name: gofast;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

これを行うための既知の方法はありますか、私は明らかな何かを見逃していますか、それともそれを行うことができないのですか？

どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

2

これは、現在のハードウェア アクセラレーションの実装の単なる制限だと思います。アニメーションが開始されると、オフになります。

(民間の知恵 - アニメートしたいブロックに非常に大きな寸法 (幅: 13000px) を与えるのは悪い考えだと言われています - GPU に巨大なオブジェクトを作成させます)

于 2011-06-22T17:46:44.487 に答える