Question

我正在尝试在使用硬件加速的css3动画期间动态增加动画持续时间。使用javascript和非硬件加速css3，我只是增加了动画持续时间，动画会加快。现在我使用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;
}

有没有一些已知的方法可以做到这一点，我是否遗漏了一些明显的东西，或者它是否可以不做？

非常感谢任何帮助。

由于

Answer 1

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

（民间智慧 - 据说给想要制作动画的块提供非常大的尺寸（又名宽度：13000px）是一个坏主意 - 它会让GPU创建巨大的物体）

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

1 个答案: