Многоступенчатая анимация и плавные переходы

Многоступенчатая анимация и плавные переходы

От автора: концепция CSS анимации довольно проста. Задается название анимации, затем в @keyframes определяется список движений и в конце анимация крепится к какому-либо элементу. Если вы до сих пор не работали с данной технологией, можете ознакомиться прямо на нашем сайте в разделе Альманах.

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

Keyframe анимация может быть пошаговой

Если нам необходимо изменить цвет фона, скажем, с оранжевого на черный с помощью keyframe анимации при наведении на элемент курсора мыши за 5 секунд, алгоритм разобьет весь процесс анимации на отдельные шаги по времени и выполнит плавный переход.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Шагов анимации можно добавлять сколь угодно много. К примеру, ниже мы добавили между оранжевым и черным синий цвет.

В двух словах про многоступенчатую анимацию: от начала и до конца процесса более одной анимации.

Keyframe анимацию по желанию можно интерполировать и изменять

Посмотрите, как цвета выше переходят один в другой. Отличное свойство по умолчанию. Более того, цвета плавно переходят, как в animation-timing-function. Анимация намного более плавная и расслабляющая, чем при использовании linear. Хотя у каждого значения свое применение. С помощью функции steps() можно принудительно задать точное число шагов анимации. Демо:

Применение многоступенчатой анимации

Хорошим примером такой анимации может послужить эквалайзер в Apple Music. Вы должны были видеть его или хотя бы что-то похожее: серия из вертикальных колонок то поднимается, то опускается, создавая иллюзию движения в такт музыке. Ниже показан пока что не двигающийся пример:

Пять вертикальный столбцов, необходимо заставить их двигаться, манипулируя их высотой. Создадим анимацию с именем equalize из 25 шагов. Т.е. один шаг это 4% анимации, каждый шаг применяется к элементу .bar:

Отлично, но они двигаются одинаково, не самый крутой эквалайзер. При вызове анимации каждому .bar можно добавить свое значение animation-duration, создав таким образом эффект того, что они двигаются независимо друг от друга.

Во и все! Эквалайзер выглядит, как мы его задумывали, двигается в ритм музыке, а мы-то всего лишь используем все ту же самую многоступенчатую анимацию. В примере ниже я поигрался со значением animation-delay (отрицательные значения, колонки стартуют одновременно):

Мы чуть не забыли о многоступенчатых переходах!

Transition анимация немного проще. Анимация начинается с одного фиксированного набора свойств и заканчивается другим. Ниже короткий пример:

Как и в случае с animation можно анимировать одинаковые наборы свойств. Давайте изменим красный квадрат на оранжевый прямоугольник при наведении мыши, совместив свойства background-color и width:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Код говорит элементу .box совершить плавный переход свойств width и background-color при наведении мыши на объект, анимация выполняется за 1 секунду.

Не совсем многоступенчатая анимация, но уже близко!

Добавление многоступенчатости transition анимации

Можно сделать нашу анимацию немного интереснее, добавив запятых, поигравшись со значениями задержки и длительности. Таким образом можно добиться того же эффекта, как и в keyframe анимации. Давайте возьмем пример выше и изменим его. Сначала сделаем плавное изменение ширины, а после изменим цвет.

Можно сделать еще лучше и добавить дополнительные движения.

Изменяем ширину со 150px на 300px при наведении за 1 секунду.

Изменяем background-color с красного на оранжевый за 1 секунду.

Добавляем box-shadow и изменим направление тени за 1 секунду.

Добавим строку с текстом, которая плавно исчезает и уезжает влево после того, как свойства width и height прекратили изменения.

Добавляем другую строку с текстом, выскакивающую справа после того, как первая строка исчезла.

Для элементов, где анимируется более одного свойства сделать это можно, объединив transition анимацию в одно свойство.

И вот, что мы получили. Добавили немного красоты:

Ниже показан еще один пример, все hover эффекты разнесены по отдельным этапам:

Заключение

Многоступенчатая анимация и переходы забавный способ, доступный нам, для создания шикарной динамики в CSS. Эквалайзер в этой статье это один из примеров практического применения многоступенчатой анимации, но есть и множество других способов применения. Ana Tudor использовала анимацию в статье умопомрачительная анимация на сайте CSS-Tricks. У Rémi Lacorne также есть хороший пример плавных переходов.

А вы использовали многоступенчатую анимацию в своих проектах, если да, то как именно? Создавали ли вы супер сложную, сводящую челюсти анимацию? Или делали легкие незаметные вкрапления для улучшения впечатления у пользователей от вашего сайта? Пишите обо всем в комментариях.

Автор: Geoff Graham

Источник: https://css-tricks.com/

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки: ,

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

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

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

Комментарии (1)

  1. DimKi

    Bravo …
    S.P.S.

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

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

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

Я не робот.

Spam Protection by WP-SpamFree