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

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

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

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

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

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

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

Quo Vadis

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

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

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

@keyframes clocksweep {
	to { 
		transform: rotate(1turn);
	}
}
#secondhand {
	animation: clocksweep 60s steps(60) infinite;
}

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

animation-timing-function: steps(4);

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

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

steps(4, end)

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

steps(4, start)

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree