Быстрый совет: Отрицательная задержка анимации

140
Быстрый совет Отрицательная задержка анимации
Быстрый совет Отрицательная задержка анимации

Вот маленький совет 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.