От автора: концепция CSS анимации довольно проста. Задается название анимации, затем в @keyframes определяется список движений и в конце анимация крепится к какому-либо элементу. Если вы до сих пор не работали с данной технологией, можете ознакомиться прямо на нашем сайте в разделе Альманах.
Однако чтобы создать достаточно сложную анимацию, существуют свои премудрости. Один из таких трюков это многоступенчатые переходы. Именно их мы и рассмотрим сегодня в статье.
Keyframe анимация может быть пошаговой
Если нам необходимо изменить цвет фона, скажем, с оранжевого на черный с помощью keyframe анимации при наведении на элемент курсора мыши за 5 секунд, алгоритм разобьет весь процесс анимации на отдельные шаги по времени и выполнит плавный переход.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { background: black; animation: color-me-in 5s; /* можно добавить "infinite alternate" */ } @keyframes color-me-in { /* можно назвать "шаг 1" */ 0% { background: orange; } /* можно назвать "шаг 2" */ 100% { background: black; } } |
Шагов анимации можно добавлять сколь угодно много. К примеру, ниже мы добавили между оранжевым и черным синий цвет.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@keyframes color-me-in { 0% { background: orange; } /* добавили еще один шаг в середину */ 50% { background: blue; } 100% { background: black; } } |
В двух словах про многоступенчатую анимацию: от начала и до конца процесса более одной анимации.
Keyframe анимацию по желанию можно интерполировать и изменять
Посмотрите, как цвета выше переходят один в другой. Отличное свойство по умолчанию. Более того, цвета плавно переходят, как в animation-timing-function. Анимация намного более плавная и расслабляющая, чем при использовании linear. Хотя у каждого значения свое применение. С помощью функции steps() можно принудительно задать точное число шагов анимации. Демо:
Применение многоступенчатой анимации
Хорошим примером такой анимации может послужить эквалайзер в Apple Music. Вы должны были видеть его или хотя бы что-то похожее: серия из вертикальных колонок то поднимается, то опускается, создавая иллюзию движения в такт музыке. Ниже показан пока что не двигающийся пример:
Пять вертикальный столбцов, необходимо заставить их двигаться, манипулируя их высотой. Создадим анимацию с именем equalize из 25 шагов. Т.е. один шаг это 4% анимации, каждый шаг применяется к элементу .bar:
Отлично, но они двигаются одинаково, не самый крутой эквалайзер. При вызове анимации каждому .bar можно добавить свое значение animation-duration, создав таким образом эффект того, что они двигаются независимо друг от друга.
Во и все! Эквалайзер выглядит, как мы его задумывали, двигается в ритм музыке, а мы-то всего лишь используем все ту же самую многоступенчатую анимацию. В примере ниже я поигрался со значением animation-delay (отрицательные значения, колонки стартуют одновременно):
Мы чуть не забыли о многоступенчатых переходах!
Transition анимация немного проще. Анимация начинается с одного фиксированного набора свойств и заканчивается другим. Ниже короткий пример:
|
1 2 3 |
.move-me { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; } |
Как и в случае с animation можно анимировать одинаковые наборы свойств. Давайте изменим красный квадрат на оранжевый прямоугольник при наведении мыши, совместив свойства background-color и width:
|
1 2 3 4 5 6 7 8 9 10 11 |
.box { width: 150px; height: 150px; background-color: red; transition: 1s; } .box:hover { width: 300px; background-color: orange; } |
Код говорит элементу .box совершить плавный переход свойств width и background-color при наведении мыши на объект, анимация выполняется за 1 секунду.
Не совсем многоступенчатая анимация, но уже близко!
Добавление многоступенчатости transition анимации
Можно сделать нашу анимацию немного интереснее, добавив запятых, поигравшись со значениями задержки и длительности. Таким образом можно добиться того же эффекта, как и в keyframe анимации. Давайте возьмем пример выше и изменим его. Сначала сделаем плавное изменение ширины, а после изменим цвет.
|
1 2 3 4 5 6 7 |
.box { transition: /* щаг 1 */ width 1s, /* шаг 2 */ background 0.5s 1s; } |
Можно сделать еще лучше и добавить дополнительные движения.
Изменяем ширину со 150px на 300px при наведении за 1 секунду.
Изменяем background-color с красного на оранжевый за 1 секунду.
Добавляем box-shadow и изменим направление тени за 1 секунду.
Добавим строку с текстом, которая плавно исчезает и уезжает влево после того, как свойства width и height прекратили изменения.
Добавляем другую строку с текстом, выскакивающую справа после того, как первая строка исчезла.
Для элементов, где анимируется более одного свойства сделать это можно, объединив transition анимацию в одно свойство.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/* наш квадрат */ .box { width: 150px; height: 150px; background-color: red; box-shadow: 5px 5px 25px #000; transition: all 1s; } /* hover... */ .box:hover { /* увеличиваем width */ width: 300px; /* изменяем цвет*/ background-color: orange; /* двигаем тень */ box-shadow: -5px 5px 25px #000; } /* Первая строка текста */ .box__blurb { /* Начинаем с полной непрозрачности, центрирована */ opacity: 1; transform: translateX(45px); /* затем плавно изменяем эти два свойства */ transition: opacity 0.5s 2s, transform 0.5s 0.5s; } /* .box hover... */ .box:hover .box__blurb { /* затухание */ opacity: 0; /* двигаем вправо */ transform: translateX(-500px); } /* Вторая строка текста */ .rect__blurb { /* элемент по началу сдвинут за рамку и прозрачен */ opacity: 0; transform: translateX(500px); /* Плавно изменяем два свойства */ transition: opacity 0.5s 1s, transform 0.5s 1s; } /* .box hover... */ .box:hover .rect__blurb { /* Плавное появление */ opacity: 1; /* выход строки справа */ transform: translateX(-100px); } |
И вот, что мы получили. Добавили немного красоты:
Ниже показан еще один пример, все hover эффекты разнесены по отдельным этапам:
Заключение
Многоступенчатая анимация и переходы забавный способ, доступный нам, для создания шикарной динамики в CSS. Эквалайзер в этой статье это один из примеров практического применения многоступенчатой анимации, но есть и множество других способов применения. Ana Tudor использовала анимацию в статье умопомрачительная анимация на сайте CSS-Tricks. У Rémi Lacorne также есть хороший пример плавных переходов.
А вы использовали многоступенчатую анимацию в своих проектах, если да, то как именно? Создавали ли вы супер сложную, сводящую челюсти анимацию? Или делали легкие незаметные вкрапления для улучшения впечатления у пользователей от вашего сайта? Пишите обо всем в комментариях.
Автор: Geoff Graham
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)