CSS-переходи

CSS-переходи (transitions) - це механізм, який дозволяє плавно змінювати стилі елементів під час зміни їх стану. Наприклад, коли користувач наводить курсор миші на елемент, можна змінювати його кольори, розміри або інші властивості плавно, замість миттєвого змінювання стилів.

У CSS-переходах є всього два стани: початкове і кінцеве значення властивості. Для складніших ефектів використовують CSS-анімацію.

CSS-переходами керують за допомогою таких властивостей:

transition-property: властивість_пеерходу;
transition-duration: тривалість_переходу; 
transition-timing-function: часова_функція_переходу;
transition-delay: тривалість_затримки;

Властивість transition-property

Властивість transition-property вказує, яка властивість або властивості повинні бути анімовані (переходити плавно) під час зміни стану елемента. Ця властивість дозволяє контролювати, які атрибути елемента повинні бути анімовані при спрацьовуванні подій, таких як наведення курсору чи зміна фокусу.

Значенням може бути одна властивість або список властивостей через кому. За замовчуванням значення all - будуть анімовані всі можливі властивості.

transition-property: property1, property2 ...;

тут property1, property2, ... - назви властивостей CSS, які повинні бути анімовані.

Наприклад, якщо треба анімувати зміну кольору тла (background-color) та розмір (width) елемента при наведенні курсору.

Список властивостей, які можуть бути анімовані в майбутньому може змінитися. Потрібно обов'язково зазначати властивості, які треба анімувати. Якшо цього не зробити, то будуть проанімовані усі властивості елемента.

Властивість transition-duration

Властивість transition-duration вказує тривалість часу, протягом якого повинна відбутися анімація зміни стилів властивостей, які були задані за допомогою властивості transition-property. Ця властивість вказує, скільки часу потрібно для зміни стану властивостей з їх поточних значень на нові значення. Якщо цю властивість не вказано, то перехід відбувається миттєво. Значення можна задавати у мілісекундах: 250ms, 3000ms або в секундах: : 0.25s, 3s.

transition-duration: time;

тут time - тривалість анімації в секундах (s) або мілісекундах (ms).

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

Зазвичай комфортний час переходу для сприйняття людиною - 250ms. Орієнтуйтейсь приблизно на такий час при налаштуванні переходів кольору чи розміру скажімо для кнопок.

Властивість transition-timing-function

Властивість transition-timing-function визначає графік, за яким анімація переходу відбувається від початкового значення до кінцевого значення. Ця властивість дозволяє вказати, яким чином зміни значень властивостей будуть плавно відбуватися протягом періоду, вказаного за допомогою transition-duration.

Існує декілька можливих значень для властивості transition-timing-function:

1. ease (за замовчуванням): Починає повільно, збільшує швидкість посередині анімації та повільно сповільнює в кінці. Це забезпечує плавний і природний ефект анімації.

2. linear: Анімація відбувається зі сталою швидкістю протягом всього періоду.

3. ease-in: Анімація починається повільно та збільшує швидкість в кінці.

4. ease-out: Анімація починається швидко та сповільнюється в кінці.

5. ease-in-out: Анімація починається повільно, збільшує швидкість всередині та сповільнюється в кінці.

6. cubic-bezier(n,n,n,n): Дозволяє визначити власну криву таймінгу за допомогою значень n, які лежать в діапазоні від 0 до 1.

.element {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 200px;
  transition-property: background-color, width;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* Власна крива таймінгу */
}

.element:hover {
  background-color: #e74c3c;
  width: 300px;
}

Функція Cubic-Bezier

За допомогою функції розподілу часу Cubic-Bezier можна описати кастомну швидкість переходу властивості від одного значення до іншого.

Є багато видів функцій розподілу часу базованих на функціях Безьє. Для охочих дізнатися про них більше можна почитати тут.

Властивість transition-delay

Властивість transition-delay визначає часовий інтервал перед початком виконання анімації зміни стилів, яку ви встановили за допомогою властивостей transition-property, transition-duration, та transition-timing-function.

transition-delay: time;

тут time - тривалість затримки вказується в секундах (s) або мілісекундах (ms).

Короткий запис CSS-переходу

Короткий запис CSS-переходу (CSS transition shorthand) дозволяє встановлювати одразу всі параметри переходу за допомогою однієї властивості transition. Це спрощує і покращує читабельність коду, оскільки всі параметри переходу розміщуються в одному місці.

transition: property duration timing-function delay;

property: Властивість чи властивості CSS, які повинні бути анімовані.

duration: Тривалість анімації вказується в секундах (s) або мілісекундах (ms).

timing-function: Функція плавності анімації.

delay: Затримка перед початком анімації, вказується в секундах (s) або мілісекундах (ms).

Можна зазначити більше однієї властивості анімації, розділяючи їх комами:

transition: property1 duration1 timing-function1 delay1, 
            property2 duration2 timing-function2 delay2;

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

transition: background-color 500ms ease-in, border-radius 500ms ease-out;

Сценарії з transition-delay

transition-delay використовується для встановлення затримки перед початком анімації для властивостей, які вказані в transition-property. Ця властивість може бути корисною для створення послідовних анімацій, коли треба, щоб різні властивості анімувалися з різними затримками.

 transition: background-color 0.5s ease 0s, 
             color 0.5s ease 0.5s, 
             border-radius 0.5s ease 1s;

Покликання:

Функція розподілу часу cubic-bezier

Трохи теорії про функцію Cubic-Bezier

Дуже крутий гайд про переходи із прикладами