旋转关键帧动画不流畅答案

【问题标题】：Rotate keyframe animation not smooth旋转关键帧动画不流畅
【发布时间】：2018-07-18 23:49:53
【问题描述】：

我不知道为什么我的加载图标动画滞后。它似乎没有硬件加速。我相信这是执行此操作的标准方式，所以我有点困惑。

.is-loading
  color: transparent
  pointer-events: none
  position: relative
  &:after
    -webkit-animation: spinAround 750ms infinite linear
    animation: spinAround 750ms infinite linear
    border: 2px solid
    border-radius: 100%
    content: ""
    display: block
    left: 50%
    margin-left: -8px
    margin-top: -8px
    top: 50%
    position: absolute
    height: 16px
    width: 16px
    border-color: transparent white white white


@-webkit-keyframes spinAround
  from
    -webkit-transform: rotate(0deg)
    transform: rotate(0deg)
  to
    -webkit-transform: rotate(359deg)
    transform: rotate(359deg)

@keyframes spinAround
  from
    transform: rotate(0deg)
  to
    transform: rotate(359deg)

这是一支笔：https://codepen.io/kmj2318/pen/BPLjPM

在我自己的页面上看起来很糟糕，但在 codepen 上可能很难说它是滞后的。如果您打开 Web 检查器并将鼠标悬停在 html 元素上，您会看到与它对我所做的类似。

【问题讨论】：

为什么不是 360 度？看起来还不错
我相信 360 度与 0 度是一样的，所以你会在同一点有两个帧，但它可能甚至不明显。
这是无限的技巧，第一个状态等于最后一个状态
我把它改成了 360 但它没有修复它。我一直在研究plasso.com/login 是如何做到这一点的。如果将类加载添加到登录按钮，它将显示动画。我无法让它像我的那样落后。
360 不是为了修复，这是一个简单的评论:)

标签： css css-transforms

【解决方案1】：

要强制硬件加速，你应该在其他转换结束时使用translateZ(0)：

from
    transform: rotate(0deg) translateZ(0)
to
    transform: rotate(359deg) translateZ(0)

【讨论】：