Question

我有以下CSS动画：

.already-visible {
  -webkit-transform: translateY(0);
  -webkit-transform: translateX(0);
  -webkit-animation: none;
  -moz-transform: translateY(0);
  -moz-transform: translateX(0);
  -moz-animation: none;
}

.come-left-in {
    display: block;
  -webkit-transform: translateX(-1000px);
  -webkit-animation: come-in 1s ease-out forwards;
  -moz-transform: translateX(-1000px);
  -moz-animation: come-in 1s ease forwards;
}


@-webkit-keyframes come-left-in {
  to {  -webkit-transform: translateX(0);    
  }
}
@-moz-keyframes come-left-in {
  to {  -moz-transform: translateX(0);    
  }
}

当用户向下滚动时（使用Bootstrap 3中的scrollspy），我用它来显示主页中每个部分的标题。但是当我在动画运行时滚动时，我注意到缺乏性能，比如一点点＆＃34;跳跃＆＃34;。有办法避免这种情况吗？我正在考虑使用左css属性动画而不是翻译转换，但我更喜欢先咨询这个问题。

感谢。

Answer 1

我不知道webkit如何计算变换，但通常是通过乘以可能非常痛苦的矩阵来完成的。

我会使用margin-left，而不只是left。 margin-left将计算与父元素的距离，对我来说一直适用于关键帧动画。

Answer 2

使用通常采用GPU加速的3d转换（即使转换为2d）。

.already-visible {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: none;
  -moz-transform: translate3d(0, 0, 0);
  -moz-animation: none;
}

.come-left-in {
    display: block;
  -webkit-transform: translate3d(-1000px, 0, 0);
  -webkit-animation: come-in 1s ease-out forwards;
  -moz-transform: translate3d(-1000px, 0, 0);
  -moz-animation: come-in 1s ease forwards;
}


@-webkit-keyframes come-left-in {
  to {  -webkit-transform: translate3d(0, 0, 0);    
  }
}
@-moz-keyframes come-left-in {
  to {  -moz-transform: translate3d(0, 0, 0);    
  }
}

详细了解HTML5 Rocks 另外，here。

-webkit-keyframes的性能

2 个答案: