Я работаю над небольшим проектом, чтобы продемонстрировать некоторые возможности с переменными шрифтами.Вы можете увидеть совершенно незавершенный продукт здесь: 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) он работает без сбоев.