Перехід - CSS-хитрощі | Альманах CSS 2025

transitionВластивість є властивість скороченого використовується для подання до чотирьох перехідних пов'язаних властивостей від руки:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Ці властивості переходу дозволяють елементам змінювати значення протягом певної тривалості, анімуючи зміни властивостей, замість того, щоб вони відбувалися негайно. Ось простий приклад, який змінює колір тла елемента на: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Цей div займе пів секунди, коли миша над ним перетвориться з червоного на зелений. Ось демонстрація такого переходу в прямому ефірі:

Див. Демо про перехід пера від Луїса Лазаріса (@impressivewebs) на CodePen.

Ви можете вказати конкретну властивість, як ми маємо вище, або використовувати значення “все” для посилання на властивості переходу.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

У цьому наведеному вище прикладі як фон, так і відступ будуть переходити через значення “все”, вказане для transition-propertyчастини скороченого тексту.

Ви можете розділяти набори значень комами, щоб робити різні переходи за різними властивостями:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Здебільшого порядок значень не має значення - якщо не вказана затримка. Якщо ви вказали затримку, спочатку потрібно вказати тривалість. Перше значення, яке браузер розпізнає як дійсне значення часу, завжди буде представляти тривалість. Будь-яке наступне дійсне значення часу буде проаналізовано як затримку.

Деякі властивості не можна перенести, оскільки вони не є анімаційними властивостями. Повний перелік властивостей, які можна анімувати, див. У специфікації.

Вказуючи перехід на самому елементі, ви визначаєте перехід, який відбуватиметься в обох напрямках. Тобто, коли стилі змінюються (наприклад, при наведенні курсору), їх властивості змінюватимуться, а коли стилі змінюватимуться назад (наприклад, при наведенні курсору) вони будуть переходити. Наприклад, наступні демонстраційні переходи при наведенні, але не при наведенні:

Дивіться Pen zohgt від Louis Lazaris (@impressivewebs) на CodePen.

Це відбувається тому, що перехід переміщено до :hoverселектора стану, і на селекторі немає відповідного переходу, який націлений на елемент безпосередньо без :hoverстану.

Для сумісності у всіх підтримуваних браузерах потрібні префікси постачальників зі стандартним синтаксисом, оголошеним останнім:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (перша стабільна версія IE для підтримки transition) не вимагає -ms-префікса.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.