Question

我正在做一个小项目，以演示可变字体的一些可能性。您可以在这里查看完全未完成的产品：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）上，它都不会打h。

CSS动画会降低台式机浏览器的速度，但不会降低移动浏览器的速度

0 个答案: