减慢 CSS 动画中“帧”之间的延迟？答案

【问题标题】：Slowing down the delay between "frames" in a CSS animation?减慢 CSS 动画中“帧”之间的延迟？
【发布时间】：2015-11-23 15:03:10
【问题描述】：

我有一个在用户机器上相当密集的 CSS 动画（特别是我的 macbook 在 5 分钟内无限运行动画时让粉丝疯狂地旋转）。我怀疑这是因为浏览器每次重绘浏览器都会更新hue-rotate过滤器（在整个页面背景上），这会显着减慢速度。

这是有问题的动画：

@keyframes rotatehue {
  0% {

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

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

这里是使用的动画属性：

animation: rotatehue 300s linear infinite;

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

【问题讨论】：

对不起，我不明白这个问题。你能解释得更好吗？
据我所知，每次重绘浏览器都会更新 CSS 动画（就像在 javascript 中使用 requestAnimationFrame 时一样）。我想知道，因为过滤器是一种计算成本高昂的动画，以从本质上降低动画帧速率，因此在播放动画时它不会减慢浏览器的速度
我不认为你可以这样做，也许我错了......但是，尝试通过设置-webkit-transform:translate3d(0,0,0)为元素激活硬件加速
啊，那很不幸，感谢您的回答@Skatch 不幸的是，这并没有解决手头的问题，但我想这是不可能的。

标签： css animation

【解决方案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); }
}

&lt;div class="base"&gt;&lt;/div&gt;

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

【讨论】：