Переходи в CSS дозволяє плавно перейти від одного стану елемента до іншого. Працює це так, що окремі властивості анімуються від початкового стану до кінцевого.
Ви можете визначити:
- transition-property. які властивості анімуються;
- transition-duration. як довго триває анімація;
- transition-timing-function. як обчислюються проміжні стану;
- transition-delay. анімація починається через деякий час.
Ви можете встановити кожне властивість CSS окремо або використовувати скорочену версію: transition. В цьому випадку, тільки transition-duration є обов'язковим.
Майте на увазі, що перехід являє собою специфічний віданімаціі. де є тільки початковий і кінцевий стан.
Швидкий приклад
Переходи часто використовуються для стану: hover.
Замість миттєвого застосування правил CSS при наведенні, фон і колір тексту змінюються повільно.
transition-duration
transition-duration є єдиним стильовим властивістю, необхідним для створення переходу. Воно може бути встановлено або в секундах (2s), або в мілісекундах (100ms).
Якщо ви хочете, щоб ваш перехід тривав півсекунди. то можете написати 0.5s або 500ms. Залежно від того, наскільки швидко ви хочете, щоб тривав перехід, може бути простіше і / або швидше писати одну одиницю.
transition-property
Тільки третина властивостей CSS може бути анімована. На сайті Mozilla є повний список властивостей.
За замовчуванням у властивості transition-property значення all. це просто означає, що будуть анімовані всі можливі властивості.
Ви можете дозволити анімацію тільки одного або декількох властивостей.
Властивість border повністю анімується і дозволяє легко спостерігати повільний перехід (2 секунди).
transition-timing-function
Функція часу визначає, як обчислюється значення кожної властивості під час переходу.
За замовчуванням перехід дорівнює ease. він прискорюється на початку і сповільнюється в кінці.
Ви можете вирішити, що перехід буде відбуватися з постійною швидкістю. Функція часу може прискорити або сповільнити перехід.
Найпростіший спосіб візуалізації функцій часу полягає в зміні властивостей позиціонування. зразок left.
Майте на увазі, що всі переходи займають однаковий час (1 секунда).
Якщо ви хочете отримати уявлення, як працюють інші функції часу, подивіться цю шпаргалку.
cubic-bezier
Якщо всі ці готові функції часу не підходять, ви можете написати свою власну, використовуючи криві Безьє.
Сайт cubic-bezier.com - це простий інструмент для візуального написання своїх власних кривих.
transition-delay
transition-delay визначає затримку, т. е. як довго перехід повинен чекати. перш ніж почнеться насправді.
Як і з transition-duration ви можете використовувати секунди (s) або мілісекунди (ms).