Дискретизация по времени: CSS функция steps()

Дискретизация по времени: CSS функция steps()

От автора: еще очень давно я узнал о любопытной функции steps() в CSS спецификации по анимации. Функция редко используется в разработке, и ее сложно понять. В своей последней книге я поверхностно рассказал об этой функции. Тем не менее, у steps() есть несколько замечательных способов применения, а благодаря правильным аналогиям понять принцип ее работы не составит труда.

Дискретное или непрерывное движение

По умолчанию в CSS переходах и анимации создается непрерывное движение между состояниями. Т.е. если расположить элемент где-то на экране и передвигать его в другое место, браузер постарается сделать переход как можно более плавным.

Анимация будет плавной вне зависимости от выбранной тайминг функции, или даже если элемент не двигается; к примеру, если менять фоновый цвет элемента со временем, смена будет также плавной.

Чтобы добавить паузы в CSS анимацию, необходимо взять две keyframes анимации с одинаковой информацией и расположить их одна за другой, разделенные только временем: пример можно посмотреть в коде моего CSS слайдера. Но если keyfram’ы разные, то браузер вернется к плавной анимации элемента.

Quo Vadis

В аналоговых наручных часах анимацией называется механическое движение: плавное перемещение, бесконечная шкала, как секундная стрелка в ролексе. Мы с вами, наверное, больше знакомы с кварцевым механизмом циферблата: серия отдельных дискретных перемещений стрелки. Как воссоздать подобное движение в CSS?

С помощью функции steps()

С помощью функции steps() мы можем принудить CSS анимацию «тикать». Хороший пример – секундная стрелка часов: полный цикл циферблата занимает одну минуту, т.е. мы можем разделить движение секундной стрелки на 60 шагов. Пример таких часов вы видели в начале статьи.

В общем и целом, функция steps() пригодится, когда вам нужно резко двигать элемент между состояниями без промежуточного движения: движение разбивается на несколько заданных шагов. В следующих статьях я продемонстрирую еще примеры использования steps(). Как отдельное значение, функция steps() ассоциируется со свойством animation-timing-function:

Начало и конец

С помощью необязательных значений start и end можно указать моменты начала и завершения шагов. Лучше всего смысл значений можно понять на примере ритма музыки: значение по умолчанию end означает, что функция steps() будет делать все движения «в ритме»: если разбить временной промежуток на 4 шага, то движение случится сразу после выдыхания и будет продолжаться до конца:

А значение start наоборот означает, что движения будут идти «быстрее ритма»: на том же промежутке времени движение начнется сразу же с паузой в конце.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: