时间戳

首页 > 解决方案 > CSS 动画会减慢桌面浏览器的速度，但不会减慢移动浏览器的速度

javascript - CSS 动画会减慢桌面浏览器的速度，但不会减慢移动浏览器的速度

问题描述

我正在做一个小项目来演示可变字体的一些可能性。您可以在这里看到完全未完成的产品：https ://curtismann.org/variablefonts/ 。问题的要点是我有 100 个动画元素（演示 2），所有元素都具有相同的动画，每个元素都有不同的延迟。动画看起来是这样的......

@keyframes wave{
  0%{ font-variation-settings: "wght" 200, "ital" 2; color: #5c5c5c }
  25%{ font-variation-settings: "wght" 900, "ital" 0; color: #ff1e3c }
  50%{ font-variation-settings: "wght" 200, "ital" 2; color: #5c5c5c }
  75%{ font-variation-settings: "wght" 200, "ital" 2; color: #ffffff }
  100%{ font-variation-settings: "wght" 200, "ital" 2; color: #5c5c5c }
}

...我通过 JS 将动画分配给每个元素。

div.style.animation = "wave 3s " + delay + "s linear infinite";

动画开始时对我来说非常流畅（在桌面上），但经过几次迭代后，它们变慢了，页面变得迟缓且无响应。让我感到困惑的是，在我的手机（Chrome 和 Safari）上，它可以正常工作。

标签： javascriptcsscss-animations

解决方案

推荐阅读