Управление CSS3-анимацией с помощью функции steps ()

Анимация — одна из величайших функций, представленных в CSS. В прошлом веб-анимация была доступна только на территории JavaScript или Flash. Но сегодня многие сайты предпочитают использовать CSS для добавления тонкой анимации. В предыдущих статьях мы рассмотрели, как сделать некоторые интересные вещи с помощью CSS-анимации, например, добавить эффект выделения и добавить эффект отскока к чему-либо.

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

Рекомендуемое чтение: 38 вдохновляющих демонстраций анимации CSS3

Так что же это?
Как правило, анимация в CSS будет проходить прямо от начала до конца в течение указанной продолжительности. steps () является частью функции синхронизации анимации. Это позволяет нам контролировать анимацию, чтобы двигаться постепенно. Самый лучший пример, который показывает, как работает steps () — это секундная стрелка аналоговых часов; секундная стрелка часов не движется непрерывно, вместо этого ее движения разбиты на этапы. Итак, давайте повторим это с помощью CSS-анимации и steps ().
Копирование секундной стрелки часов
Давайте сначала добавим ключевые кадры, которые будут вращать секундную стрелку на 360 градусов; вращение начнется при 90 градусах (или в 12 часов). Обратите внимание, что следующий код может нуждаться в префиксе (-moz-, -o- и -ms-) для работы в разных браузерах.

@ -webkit-keyframes вращение {
от {
преобразование: вращение (90 градусов);
}
к {
преобразование: вращение (450 градусов);
}
}

Секундная стрелка будет двигаться постоянно каждую секунду и завершит вращение на 360 градусов за 60 секунд. Таким образом, здесь мы установим продолжительность анимации на 60 с, и это скажет браузеру завершить ее за 60 шагов с шагами (60) примерно так.

.second {
анимация: вращение с шагом 60 (60) бесконечно;
трансформация происхождения: 100% 50%;

// стили оформления
цвет фона: # e45341;
высота: 2 пикселя;
margin-top: -1px;
положение: абсолютное;
верх: 50%;
ширина: 50%;
}

Мы создали две демонстрации для этого; один с шагами () и один с линейным. Вы можете увидеть различные движения из этого скриншота ниже.

Надеемся, что на этом этапе вы сможете понять и представить, как работает steps (). Чтобы увидеть демо в действии, перейдите по этой ссылке ниже.
Больше вдохновения …
Кроме того, здесь мы собрали несколько потрясающих экспериментов и демонстраций, использующих шаги () от многих веб-разработчиков. Проверьте их, и я надеюсь, что вы можете черпать вдохновение из них.