javascript - 提高硬件加速css3动画的速度

Question

我正在尝试在使用硬件加速的 css3 动画期间动态增加动画持续时间。使用 javascript 和非硬件加速的 css3，我只是增加了动画持续时间，动画会加速。现在我使用 translate3d 而不是 left 属性来制作动画，增加动画持续时间不起作用。我有一种感觉，一旦动画被卸载到 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;
}

是否有某种已知的方法可以做到这一点，我是不是遗漏了一些明显的东西，还是不能这样做？

非常感谢任何帮助。

谢谢

Answer 1

我认为这只是当前硬件加速实现的局限性。一旦动画开始，它就会消失。

(民间智慧 - 据说给要动画的 block 提供非常大的尺寸(也称为宽度:13000px)是个坏主意 - 它会使 GPU 创建巨大的对象)