Пошук уроків, статей та іншого контенту
Створите плавні переходи між значеннями CSS-властивостей і налаштуєте їхню тривалість та часування.
Плавний перехід, або transition, поступово змінює значення CSS-властивості від початкового до кінцевого. Наприклад, замість миттєвої зміни кольору кнопка може плавно змінити його за 300 мс.
Переходи найчастіше використовують для реакції на:
наведення курсору через :hover;
фокусування елемента через :focus;
натискання через :active;
додавання або видалення класу;
зміну стану елемента за допомогою JavaScript.
Важливо: transition не запускається самостійно. Він лише визначає, як саме має відбуватися зміна, коли CSS-властивість переходить з одного значення в інше.
transitionНайпростіший запис:
.button {
transition: background-color 300ms;
}
.button:hover {
background-color: #2563eb;
}У цьому прикладі:
background-color — властивість, яка анімується;
300ms — тривалість переходу;
при наведенні колір кнопки плавно змінюється;
після припинення наведення колір так само плавно повертається назад.
Без transition браузер змінив би колір одразу.
Для тривалості переходу використовують:
ms — мілісекунди;
s — секунди.
Наприклад:
transition: color 200ms;
transition: transform 0.4s;200ms і 0.2s мають однакову тривалість.
Властивість transition є скороченим записом для кількох окремих властивостей:
.element {
transition-property: transform;
transition-duration: 400ms;
transition-timing-function: ease;
transition-delay: 100ms;
}transition-propertyВизначає, які властивості потрібно змінювати плавно.
.card {
transition-property: transform, box-shadow;
}У цьому прикладі плавно змінюватимуться лише transform і box-shadow.
Можна вказати:
.element {
transition-property: all;
}Значення all застосовує перехід до всіх властивостей, зміна яких підтримує анімацію. Проте зазвичай краще явно перелічувати потрібні властивості. Це робить код зрозумілішим і не створює несподіваних анімацій.
transition-durationВизначає тривалість переходу:
.button {
transition-duration: 250ms;
}Якщо тривалість не вказати або встановити 0s, перехід не буде помітним.
transition-timing-functionВизначає швидкість переходу на різних його етапах.
.element {
transition-timing-function: ease-in-out;
}Поширені значення:
linear — рівномірна швидкість від початку до кінця;
ease — повільний початок, швидша середина та повільний кінець;
ease-in — повільний початок;
ease-out — повільний кінець;
ease-in-out — повільні початок і кінець;
cubic-bezier(...) — власна функція часу.
Приклад:
.button {
transition: transform 300ms ease-out;
}Для інтерфейсів часто підходить ease-out: елемент швидко реагує на дію користувача, а в кінці м’яко зупиняється.
transition-delayВизначає затримку перед початком переходу:
.tooltip {
transition: opacity 200ms ease 150ms;
}У цьому прикладі перехід почнеться через 150ms після зміни властивості.
Затримка може бути корисною для підказок, щоб вони не з’являлися через випадкове коротке наведення курсору.
Замість окремих властивостей зазвичай використовують скорочений запис:
.element {
transition: property duration timing-function delay;
}Наприклад:
.button {
transition: background-color 250ms ease-in-out 50ms;
}Порядок значень:
властивість;
тривалість;
функція часу;
затримка.
Тривалість і затримка обидві задаються часом, тому їхній порядок важливо розуміти. Перше значення часу — це duration, а друге — delay.
Властивості розділяють комами:
.card {
transition:
transform 250ms ease-out,
box-shadow 250ms ease-out,
background-color 150ms linear;
}Кожна властивість може мати власну тривалість і функцію часу.
Якщо параметри однакові, можна записати:
.card {
transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}Нижче наведено повну сторінку з кнопкою та карткою. Кнопка змінює колір і трохи піднімається при наведенні, а картка збільшується та отримує сильнішу тінь.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Плавні переходи</title>
<style>
:root {
color-scheme: light;
font-family: Arial, sans-serif;
background: #f1f5f9;
color: #0f172a;
}
body {
display: grid;
min-height: 100vh;
margin: 0;
place-items: center;
}
.demo {
display: grid;
gap: 24px;
width: min(90%, 420px);
}
.button {
padding: 12px 20px;
border: 0;
border-radius: 8px;
background-color: #2563eb;
color: white;
font-size: 1rem;
cursor: pointer;
transition:
background-color 200ms ease-out,
transform 200ms ease-out,
box-shadow 200ms ease-out;
}
.button:hover {
background-color: #1d4ed8;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgb(15 23 42 / 20%);
}
.button:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 3px;
}
.card {
padding: 24px;
border-radius: 12px;
background-color: white;
box-shadow: 0 3px 8px rgb(15 23 42 / 12%);
transition:
transform 250ms ease-out,
box-shadow 250ms ease-out;
}
.card:hover {
transform: scale(1.03);
box-shadow: 0 14px 24px rgb(15 23 42 / 18%);
}
@media (prefers-reduced-motion: reduce) {
.button,
.card {
transition: none;
}
}
</style>
</head>
<body>
<main class="demo">
<button class="button" type="button">Наведіть курсор</button>
<article class="card">
<h1>Картка</h1>
<p>Наведіть курсор на картку, щоб побачити плавний перехід.</p>
</article>
</main>
</body>
</html>Зверніть увагу на кілька деталей:
transform: translateY(-3px) переміщує кнопку вгору без зміни її розміру в потоці документа;
transform: scale(1.03) збільшує картку;
box-shadow також може змінюватися плавно;
:focus-visible зберігає видимий стан фокусу для навігації клавіатурою;
медіазапит prefers-reduced-motion: reduce вимикає переходи для користувачів, які попросили операційну систему зменшити рух.
Переходи працюють із властивостями, для яких браузер може обчислити проміжні значення.
Типові приклади:
.element {
transition:
opacity 200ms,
color 200ms,
background-color 200ms,
width 300ms,
transform 300ms,
border-radius 300ms,
box-shadow 300ms;
}Наприклад, браузер може поступово змінити opacity від 0 до 1, а width — від 200px до 400px.
Не всі властивості можна плавно анімувати. Зокрема, display не має проміжних значень:
/* transition не зробить зміну display плавною */
.element {
transition: display 300ms;
}Переходи також не можуть безпосередньо плавно змінити значення auto у багатьох властивостях, наприклад висоту від height: 0 до height: auto.
transition описує зміну між двома станами. Наприклад:
.link {
color: #334155;
transition: color 200ms;
}
.link:hover {
color: #2563eb;
}Переходи добре підходять для дій користувача: наведення, фокусу або зміни класу.
Властивість animation використовують для окремих послідовностей, які можуть мати кілька кроків і запускатися незалежно від взаємодії користувача. Для простого переходу між станами достатньо transition.
transition додано лише до стану :hoverНевдалий варіант:
.button:hover {
transition: background-color 300ms;
background-color: green;
}Перехід у напрямку наведення може спрацювати, але повернення до початкового стану часто відбуватиметься без плавності, адже після припинення наведення правило з :hover більше не застосовується.
Правильніше додати transition до базового стану:
.button {
background-color: blue;
transition: background-color 300ms;
}
.button:hover {
background-color: green;
}Переходи тривалістю в кілька секунд можуть здаватися повільними та заважати взаємодії з інтерфейсом. Для невеликих змін часто достатньо діапазону від 150ms до 300ms, але точне значення залежить від елемента та ефекту.
top або left замість transformДля переміщення елемента зазвичай краще використовувати transform:
.item {
transition: transform 250ms ease-out;
}
.item:hover {
transform: translateX(20px);
}Це не змінює позицію елемента в потоці документа та зазвичай краще відповідає завданню візуального переміщення.
Не варто прибирати стандартний контур фокусу без заміни:
/* Не рекомендується */
.button {
outline: none;
}Якщо потрібно змінити вигляд фокусу, створіть помітний власний стиль через :focus-visible.
Додавайте transition до базового стану елемента, а не лише до :hover.
Анімуйте тільки ті властивості, які справді мають змінюватися.
Для переміщення та масштабування використовуйте transform.
Не використовуйте надмірно довгі переходи для звичайних елементів керування.
Перевіряйте стани :hover, :focus-visible і повернення до початкового стану.
Враховуйте налаштування prefers-reduced-motion.
Не покладайтеся лише на колір: зміна стану має бути зрозумілою також без нього.
transition плавно змінює CSS-властивість між двома станами.
Основний синтаксис: transition: property duration timing-function delay.
transition-property визначає властивість, transition-duration — тривалість, transition-timing-function — характер руху, а transition-delay — затримку.
Для кількох властивостей використовують записи через кому.
Перехід потрібно задавати в базовому правилі елемента.
Не всі CSS-властивості підтримують плавну зміну.
Для переміщення та масштабування зручно використовувати transform.
Доступні інтерфейси мають зберігати помітний фокус і враховувати зменшення руху.