css - 减慢 CSS 动画中 "frames"之间的延迟？

Question

我有一个在用户机器上相当密集的 CSS 动画(特别是我的 macbook 在 5 分钟内无限运行动画时疯狂地旋转风扇)。我怀疑这是因为浏览器正在更新色调旋转过滤器(在整个页面背景上)每次重绘浏览器都可以显着减慢速度。

这是有问题的动画:

@keyframes rotatehue {
  0% {

    filter: hue-rotate(100deg);
  }
  63% {
    filter: hue-rotate(360deg);
  }
  100% {

    filter: hue-rotate(100deg);
  }
}

这里是使用的动画属性:

animation: rotatehue 300s linear infinite;

有没有什么办法，因为它是一个长动画，不需要每帧之间的分钟变化，可以说“每 0.5 秒只更新一次动画”左右吗？

Answer 1

您可以使用 steps() 作为动画计时函数来减少 CPU 渲染时间。

此属性基于关键帧应用；由于您的关键帧不是对称的，因此最好在每个规则上设置不同的步数

.base {
    width: 900px;
    height: 600px;
    position: relative;
    overflow: hidden;
    background-image: url(http://placekitten.com/1000/750);
    background-size: cover;
    animation: rotatehue infinite 12s;
}


@keyframes rotatehue {
    0% { animation-timing-function: steps(3);  
         -webkit-filter: hue-rotate(0deg); }
   63% { animation-timing-function: steps(2);  
         -webkit-filter: hue-rotate(360deg); }
  100% { -webkit-filter: hue-rotate(0deg); }
}

<div class="base"></div>

我故意将步骤数设置得太低以演示这个想法 - 根据您的需要进行调整