Багатоступенева анімація і плавні переходи

13

Від автора: концепція CSS-анімації досить проста. Задається назва анімації, потім @keyframes визначається список рухів і в кінці анімація кріпиться до якого-небудь елементу. Якщо ви досі не працювали з цією технологією, можете ознайомитися прямо на нашому сайті в розділі Альманах.

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

Keyframe анімація може бути покрокової

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

body {
background: black;
animation: color-me-in 5s; /* можна додати «infinite alternate» */
}
@keyframes color-me-in {
/* можна назвати «крок 1» */
0% {
background: orange;
}
/* можна назвати «крок 2» */
100% {
background: black;
}
}

Кроків анімації можна додавати скільки завгодно багато. Наприклад, нижче ми додали між помаранчевим і чорним синій колір.

@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 анімація трохи простіше. Анімація починається з одного фіксованого набору властивостей і закінчується іншим. Нижче короткий приклад:

.move-me {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

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

.box {
width: 150px;
height: 150px;
background-color: red;
transition: 1s;
}
.box:hover {
width: 300px;
background-color: orange;
}

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

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

Додавання багатоступеневості transition анімації

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

.box {
transition:
/* щаг 1 */
width 1s,
/* крок 2 */
background 0.5 s 1s;
}

Можна зробити ще краще і додати додаткові руху.

Змінюємо ширину з 150px на 300px при наведенні за 1 секунду.

Змінюємо background-color з червоного на оранжевий за 1 секунду.

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

Додамо рядок з текстом, яка плавно зникає і їде вліво після того, як властивості width і height припинили зміни.

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

Для елементів, де анимируется більше одного властивості зробити це можна, об’єднавши transition анімацію в одну властивість.

/* наш квадрат */
.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.5 s 2s,
transform 0.5 s 0.5 s;
}
/* .box hover… */
.box:hover .box__blurb {
/* загасання */
opacity: 0;
/* рухаємо вправо */
transform: translateX(-500px);
}
/* Другий рядок тексту */
.rect__blurb {
/* елемент по початку зрушать за рамку і прозорий */
opacity: 0;
transform: translateX(500px);
/* Плавно змінюємо дві властивості */
transition:
opacity 0.5 s 1s,
transform 0.5 s 1s;
}
/* .box hover… */
.box:hover .rect__blurb {
/* Плавне поява */
opacity: 1;
/* вихід рядки праворуч */
transform: translateX(-100px);
}

І ось, що ми отримали. Додали трохи краси:

Нижче показаний ще один приклад, всі hover ефекти рознесені по окремих етапах:

Висновок

Багатоступенева анімація і переходи кумедний спосіб, доступний нам, для створення шикарною динаміки в CSS. Еквалайзер в цій статті це один з прикладів практичного застосування ступеневої анімації, але є й безліч інших способів застосування. Ana Tudor використовувала анімацію у статті запаморочлива анімація на сайті CSS-Tricks. У Rémi Lacorne також є хороший приклад плавних переходів.

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