transition

Властивість CSS transition є властивістю-скороченням для transition-property, transition-duration, transition-timing-function, transition-delay, та transition-behavior.

Спробуйте його в дії

Перехід дозволяє визначити зміну між двома станами елемента. Різні стани можуть бути визначені за допомогою псевдокласів, як-от :hover чи :active, або динамічно задані за допомогою JavaScript.

Властивості-складові

Ця властивість є скороченням для наступних властивостей CSS:

• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Синтаксис

/* Застосувати до 1 властивості */
/* назва властивості | тривалість */
transition: margin-right 4s;

/* назва властивості | тривалість | затримка */
transition: margin-right 4s 1s;

/* назва властивості | тривалість | функція згладжування */
transition: margin-right 4s ease-in-out;

/* назва властивості | тривалість | функція згладжування | затримка */
transition: margin-right 4s ease-in-out 1s;

/* назва властивості | тривалість | поведінка */
transition: display 4s allow-discrete;

/* Застосувати до 2 властивостей */
transition:
  margin-right 4s,
  color 1s;

/* Застосувати до всіх змінених властивостей */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

/* Глобальні значення */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

Значення властивості transition задається в один із таких способів:

• Спеціальне значення none, яке вказує, що переходи на цьому елементі не відбуватимуться. Це усталене значення.
• Один або декілька переходів для окремих властивостей, розділені комами.

Кожен самостійний перехід описує перехід, який слід застосувати до однієї або всіх властивостей. Він містить:

• нуль або одне значення, що представляє властивість або властивості, до яких слід застосувати перехід. Його можна задати за допомогою:
  • <custom-ident>, що представляє одну властивість.
  • Спеціального значення all, яке вказує, що перехід буде застосовано до всіх властивостей, які змінюються, коли елемент змінює стан.
  • Жодного значення; в такому разі виводиться значення all, і заданий перехід все одно застосовується до всіх змінюваних властивостей.
• нуль або одне значення <easing-function>, що задає функцію згладжування
• нуль, одне або два значення <time>. Перше значення, яке можна розпізнати як час, призначається для transition-duration, а друге – для transition-delay.
• нуль або одне значення, що оголошує, чи слід починати переходи для властивостей, чия анімаційна поведінка є дискретною. Значення, якщо воно присутнє, є або ключовим словом allow-discrete, або ключовим словом normal.

Якщо задано властивість переходу all для одного переходу окремої властивості, але потім задано наступні переходи для окремих властивостей зі значеннями <custom-ident>, ці наступні переходи перемагають перший. Наприклад:

transition:
  all 200ms,
  opacity 400ms;

У цьому випадку всі властивості, які змінюються, коли елемент змінює стан, переходять з тривалістю 200 мс, за винятком opacity, для якої перехід триватиме 400 мс.

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

Формальне визначення

Формальний синтаксис

<single-transition>#
де 
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
де 
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
де 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
де 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Приклади

Базовий приклад

У цьому прикладі, коли користувач наводить курсор на елемент, є півсекундна (500ms) затримка, перш ніж відбувається двосекундний перехід кольору фону.

HTML

<a class="target">Наведіть на мене курсор</a>

CSS

Задаються два значення time. У властивості-скороченні transition першим значенням <time> є transition-duration. Друге значення часу — це transition-delay. Обидва усталено дорівнюють 0s, якщо не задані.

.target {
  font-size: 2rem;
  background-color: palegoldenrod;
  transition: background-color 2s 500ms;
}

.target:hover {
  background-color: darkorange;
}

Специфікації

Сумісність із браузерами

Дивіться також

• Модуль Переходів CSS
• Застосування переходів CSS
• TransitionEvent