transition

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Интерактивный пример

Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :hover или :active или установлены динамически с помощью JavaScript.

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeNot animatable

Синтаксис

css
/* Применить к 1 свойству */
/* имя свойства | длительность */
transition: margin-left 4s;

/* имя свойства | длительность | задержка */
transition: margin-left 4s 1s;

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

/* Применить к 2 свойствам */
transition:
  margin-left 4s,
  color 1s;

/* Применить ко всем изменённым свойствам */
transition: all 0.5s ease-out;

/* Глобальные значения */
transition: inherit;
transition: initial;
transition: unset;

Свойство transition указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.

Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям all и none). Это включает в себя:

  • ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:

    • ключевое слово none
    • ключевое слово all
    • <custom-ident> именование свойства CSS.
  • ноль или одно <single-transition-timing-function> значение, представляющее временну́ю функцию

  • ноль, одно или два <time> значения. Первое значение, которое может быть интерпретировано как время, присваивается transition-duration, а второе значение, которое может быть интерпретировано как время, присваивается transition-delay.

Посмотрите, что предпринимается когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.

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

transition = 
<single-transition>#

<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>

<single-transition-property> =
all |
<custom-ident>

<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear |
<linear()>

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>

<step-easing-function> =
step-start |
step-end |
<steps()>

<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )

<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )

<steps()> =
steps( <integer> , <step-position>? )

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

Примеры

Примеры CSS переходов включены в главную статью о CSS переходах.

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

Specification
CSS Transitions
# transition-shorthand-property

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также