От автора: еще очень давно я узнал о любопытной функции steps() в CSS спецификации по анимации. Функция редко используется в разработке, и ее сложно понять. В своей последней книге я поверхностно рассказал об этой функции. Тем не менее, у steps() есть несколько замечательных способов применения, а благодаря правильным аналогиям понять принцип ее работы не составит труда.
Дискретное или непрерывное движение
По умолчанию в CSS переходах и анимации создается непрерывное движение между состояниями. Т.е. если расположить элемент где-то на экране и передвигать его в другое место, браузер постарается сделать переход как можно более плавным.
Анимация будет плавной вне зависимости от выбранной тайминг функции, или даже если элемент не двигается; к примеру, если менять фоновый цвет элемента со временем, смена будет также плавной.
Чтобы добавить паузы в CSS анимацию, необходимо взять две keyframes анимации с одинаковой информацией и расположить их одна за другой, разделенные только временем: пример можно посмотреть в коде моего CSS слайдера. Но если keyfram’ы разные, то браузер вернется к плавной анимации элемента.
Quo Vadis
В аналоговых наручных часах анимацией называется механическое движение: плавное перемещение, бесконечная шкала, как секундная стрелка в ролексе. Мы с вами, наверное, больше знакомы с кварцевым механизмом циферблата: серия отдельных дискретных перемещений стрелки. Как воссоздать подобное движение в CSS?
С помощью функции steps()
С помощью функции steps() мы можем принудить CSS анимацию «тикать». Хороший пример – секундная стрелка часов: полный цикл циферблата занимает одну минуту, т.е. мы можем разделить движение секундной стрелки на 60 шагов. Пример таких часов вы видели в начале статьи.
1 2 3 4 5 6 7 8 |
@keyframes clocksweep { to { transform: rotate(1turn); } } #secondhand { animation: clocksweep 60s steps(60) infinite; } |
В общем и целом, функция steps() пригодится, когда вам нужно резко двигать элемент между состояниями без промежуточного движения: движение разбивается на несколько заданных шагов. В следующих статьях я продемонстрирую еще примеры использования steps(). Как отдельное значение, функция steps() ассоциируется со свойством animation-timing-function:
1 |
animation-timing-function: steps(4); |
Начало и конец
С помощью необязательных значений start и end можно указать моменты начала и завершения шагов. Лучше всего смысл значений можно понять на примере ритма музыки: значение по умолчанию end означает, что функция steps() будет делать все движения «в ритме»: если разбить временной промежуток на 4 шага, то движение случится сразу после выдыхания и будет продолжаться до конца:
1 |
steps(4, end) |
А значение start наоборот означает, что движения будут идти «быстрее ритма»: на том же промежутке времени движение начнется сразу же с паузой в конце.
1 |
steps(4, start) |
Источник: //thenewcode.com/
Редакция: Команда webformyself.