提高硬件加速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

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

（民间智慧 - 据说将非常大的尺寸（又名宽度：13000 像素）赋予您想要动画的块是一个坏主意 - 它会使 GPU 创建巨大的对象）