Вот маленький совет CSS, который поможет сделать ступенчатую анимацию более естественной: Отрицательная задержка анимации. Я видел, как этой идеей делились мастера CSS-анимации Jhey и Amit в разных случаях, и это настолько аккуратный маленький трюк, что им стоит поделиться здесь!
Допустим, у нас есть группа элементов, и мы хотим, чтобы они поочередно анимировались в цикле – как в этом примере с волнистым текстом. Мы вычисляем значение animation-delay, используя пользовательское свойство, соответствующее индексу элемента.
<h1> <span style="--i: 0">B</span> <span style="--i: 1">O</span> <span style="--i: 2">U</span> <span style="--i: 3">N</span> <span style="--i: 4">C</span> <span style="--i: 5">I</span> <span style="--i: 6">N</span> <span style="--i: 7">G</span> </h1>
span {
--delay: calc(var(--i) * 200ms);
animation: bounce 500ms var(--delay, 0) infinite;
}
Here I’m setting that in the HTML, but we could use Splitting.js, a library that handles assigning custom properties for us (which enables a whole lot of cool text effects and more — I’ve written about it on this blog before).
Здесь я задаю это в HTML, но мы можем использовать Splitting.js, библиотеку, которая обрабатывает назначение пользовательских свойств за нас (что позволяет создавать множество классных текстовых эффектов и многое другое).
Вот демонстрация с обычной, положительной задержкой анимации. Вы видите, что на первой итерации анимации каждая буква начинается со стоячего места.
Теперь, если мы рассчитаем отрицательную задержку (используя -200 мс вместо 200 мс), мы увидим, что анимация ведет себя так, как будто она уже идет – мы не будем ждать, пока последний элемент окончательно анимируется, когда все остальные уже сделали это. Прекрасно!
span {
--delay: calc(var(--i) * -200ms);
animation: bounce 500ms var(--delay, 0) infinite;
}
Попробуйте закомментировать свойство --stagger в этой демонстрации, чтобы увидеть разницу.
See the Pen
Bouncing letters by Michelle Barker (@michellebarker)
on CodePen.
