Question

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

.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元素上，您将看到的内容与对我的操作类似。

Answer 1

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

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

旋转关键帧动画不流畅

1 个答案: