Пояснення CSS переходів

19

Від автора: найпростіший спосіб анімувати компоненти – зробити це через CSS переходи. У цій статті ви дізнаєтеся, як працюють CSS переходи, а також як з їх допомогою створити анімацію. Перехід здійснюється, коли CSS властивість змінює своє значення за певний проміжок часу.

Створити CSS перехід можна за допомогою властивості transition:

.selector {
transition: property duration transition-timing-function delay;
}

Властивість transition – це скорочення від 4 властивостей transition-property, transition-duration, transition-timing-function, transition-delay.

.selector {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay
/* The transition property is the shorthand for the above four properties */
transition: property duration timing-function delay;
}

transition-property відповідає за CSS властивість, яке ви хочете анімувати. У скороченні transition воно обов’язково.

transition-duration – тривалість переходу. Скільки часу має тривати перехід? Значення пишеться в секундах з суфіксом s (3s). В transition воно також обов’язково.

transition-timing-function – спосіб виконання переходу. Більш докладно трохи пізніше.

transition-delay – затримка перед виконанням. Значення пишеться в секундах з суфіксом s (3s). transition-delay не обов’язкова властивість у скороченні transition.

Виклик переходів

CSS переходи можна викликати безпосередньо через псевдокласи :hover (активує перехід при наведенні миші на елемент), :focus (активує перехід, коли користувач змінює фокус на елемент або при натисканні на полі введення) або :active (активує перехід при кліці на елемент).

/* creating transitions directly in CSS */
.button {
background-color: #33ae74;
transition: background-color 0.5 s ease-out;
}
.button:hover {
background-color: #1ce;
}

Демо на CodePen.

CSS переходи також можна викликати через JS, додаючи і видаляючи класи.

.button {
background-color: #33ae74;
transition: background-color 0.5 s ease-out;
}
.button.is-active {
color: #1ce;
}
const button = document.querySelector(‘.button’)
button.addEventListener. (‘click’, _ => button.classList.toggle(‘is active’))

Демо на CodePen.

Поняття transition-timing-function

transition-timing-function керує поведінкою переходу. За замовчуванням у всіх переходів задано linear, що означає, що властивість змінюється рівномірно до кінця переходу.

.selector {
transition: transform 1s linear;
/* OR */
transition-property: transform;
transition-duration: 1s;
transition-timing-function: linear;
}

Але в житті все нелінійно. Так реальні об’єкти не рухаються. Іноді ми прискорюємося, іноді замедляемся. transition-timing-function дозволяє все це робити.

Уявіть, що кидаєте тенісний м’яч у відкрите поле. М’яч залишає вашу долоню з максимальною швидкістю. По мірі руху він втрачає енергію, сповільнюється і врешті зупиняється. Це називається ease out. Для такого руху є таймінг функція.

.selector {
transition-timing-function: ease-out;
}

Тепер уявіть, що ви в машині. Вона поки що не рухається. Коли ви їдете в машині, вона прискорюється до своєї граничної швидкості. Це називається ease-in. Для цього руху також є своя таймінг функція.

.selector {
transition-timing-function: ease-in;
}

У вас є ease-in і ease-out, але є таймінг функція, що об’єднує обидва варіанти ease-in-out. (не раджу використовувати ease-in-out в переходах, якщо вони тривають менше секунди. Об’єкт не встигне ні прискорити, ні загальмувати. Це просто буде виглядати дивно.)

.selector {
transition-timing-function: ease-in-out;
}

Нижче демо з уже вивченими таймінг функцій:

Якщо вам не сподобалися варіанти вище, ви можете створити свою функцію через cubic-bezier.

Створення своєї таймінг функції з допомогою cubic-bezier

Cubic-bezier – це набір з чотирьох значень, що визначають transition-timing-function. Приклад:

.selector {
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
}

Не турбуйтеся про x1, y1,, x2 і y2. Вам не доведеться створювати криву Безьє самостійно (якщо ви вже не знаєте, що вони означають, і ви підлаштовуєте готову функцію).

Можете покластися на інструменти розробника Chrome і Firefox при створенні кривих. Для використання необхідно додати transition-timing-function елемент, після чого відкрити панель розробника і клікнути на таймінг функцію.

Пояснення CSS переходів

Демо на CodePen.

Докладний розбір кривих Безьє виходить за рамки цього уроку. Якщо вам цікава тема, можете докладно вивчити її в статті Поняття CSS таймінг функцій від Stephen Грейг.

Перехід двох і більше властивостей

Можна здійснювати перехід двох і більше властивостей, розділяючи їх комою властивості transition або transition-property.

Те ж саме можна робити з тривалістю, таймінг функціями і затримкою. Якщо значення однакові, можна оголосити лише одне.

.selector {
transition: background-color 1s ease-out,
color 1s ease-out;
/* OR */
transition-property: background, color;
transition-duration: 1s;
transition-timing-function: ease-out;
}

Можливо, ви захочете додати перехід на всі властивості через all. Ніколи не робіть цього. Це сильно впливає на продуктивність. Завжди ставте властивість для переходу.

/* DON’T EVER DO THIS */
.selector {
transition-property: all
}
/* ALWAYS DO THIS */
.selector {
transition-property: background-color, color, transform;
}

Перехід всередину і перехід назовні

Іноді хочеться, щоб властивості переходили всередину і назовні по-різному. Потрібні різні тривалість, таймінг функції і затримки.

Для цього необхідно написати ще один набір властивостей transition-.

.button {
background-color: #33ae74;
transition: background-color 0.5 s ease-out;
}
.button:hover {
background-color: #1ce;
transition-duration: 2s;
}

При написанні переходів всередину класів-тригерів (псевдо), властивості переходу в тригер-класі переписують оригінальні властивості переходу, задані в основному класі.

Тому в наведеному вище прикладі при наведенні миші на кнопку, колір фону зміниться через 2 секунди з #33ae74 на #1ce.

Якщо прибрати курсор до кнопки, фон змінюється вже за 0.5 секунди назад на #1ce, так як transition-duration на 2s вже не існує.

Висновок

CSS переходи – найпростіший спосіб створення анімації. Їх можна створювати як через скорочення transition, так і через властивості transition-.

Для створення переходу необхідно переписати властивість в класі (або псевдоклассе), а також додати це властивість перехід властивості transition або transition-property.