Анімації в CSS – Transitions
CSS анімації пропонують ефективний та простий спосіб додати візуальної привабливості та інтерактивності веб-інтерфейсам. Дозволяють оживити вебсторінку, зробити взаємодію приємнішою та привернути увагу користувачів.
Існує два основні способи створення анімацій:
- за допомогою transition — для плавних змін станів (наприклад, при наведенні);
- за допомогою @keyframes — для автоматичних або складних рухів.
Плавні переходи з Transition
У звичайному CSS зміна стилів відбувається миттєво. Наприклад, якщо задати елементу один колір у нормальному стані, а інший — у стані :hover, то при наведенні зміна кольору відбудеться одразу, без жодного ефекту.
Властивість transition дозволяє зробити ці зміни плавними, вказавши тривалість та спосіб переходу. Це один з найпростіших, але найефективніших інструментів CSS-анімацій.
Властивість transition включає в себе:
- transition-property — CSS-властивість, яку потрібно анімувати (наприклад, background-color, width, opacity);
- transition-duration — тривалість або час переходу (наприклад, 0.5s, 2s);
- transition-timing — функція-часу, яка описує прискорення чи сповільнення (ease, linear, ease-in, ease-out, cubic-bezier());
- transition-delay — час перед початком анімації (затримка переходу).
- transition-behavior — визначає, чи можуть відбуватися переходи для дискретних властивостей CSS, таких як display або visibility, які не можна плавно анімувати.
Властивість transition-property
Визначає, які саме CSS-властивості повинні анімуватися. Може приймати одне або декілька імен властивостей CSS у списку, розділених комами, як ми зробили вище, або використати значення all, щоб вказати, що усі властивості елемента, які підтримують анімацію будуть брати участь у плавному переході при їх зміні.
.animation {
transition: all 0.8s;
}Властивість transition-duration
Визначає, як довго триватиме анімація від початкового до кінцевого стану. задається у одиницях часу, або в секундах (s), або в мілісекундах (ms), і за замовчуванням має значення 0s.
Важливо пам’ятати, що transition-duration застосовується як для переходу вперед (наприклад, при наведенні курсору), так і для переходу назад (коли курсор відводиться). Це створює симетричний ефект.
Властивість transition-timing-function
Визначає, як змінюється швидкість переходу протягом його тривалості, тобто задає характер прискорення чи сповільнення анімації в різні моменти її виконання.
Основні значення функції:
- linear — рівномірний рух;
- ease — плавний старт і кінець (за замовчуванням);
- ease-in — повільний початок, швидке завершення;
- ease-out — швидкий початок, повільне завершення;
- ease-in-out — повільний початок і завершення;
- cubic-bezier() — повний контроль кривої прискорення.
Властивість transition-delay
Властивість transition-delay визначає проміжок часу, який має минути перед тим, як перехід (анімація) фактично розпочнеться.
Ця властивість особливо корисна, коли потрібно створити ефект послідовності або витримати паузу після певної дії користувача, перш ніж відбудеться візуальна зміна.
Задається в одиницях часу: секундах (s) або мілісекундах (ms)
- Позитивне значення (0.5s, 500ms): перехід почнеться лише після того, як мине вказаний час.
- Нульове значення (0s): перехід почнеться негайно (це значення за замовчуванням).
- Негативне значення (-1s): перехід почнеться негайно, але виглядатиме так, ніби він уже триває впродовж 1 секунди. Це означає, що анімація “пропустить” першу частину свого руху.