transition

Свойство CSS transition - это сокращенное свойство для transition-property, transition-duration, transition-timing-function, и transition-delay.

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

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

Синтаксис

/* Применить к 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.

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

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

<single-transition>#

где
<single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

где
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

где
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ru/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ru/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[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

Примеры

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

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

Спецификация Состояние Комментарий
CSS Transitions
Определение 'transition' в этой спецификации.
Рабочий черновик Изначальное определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
transitionChrome Полная поддержка 26
Полная поддержка 26
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Замечания Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
Замечания Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10
Полная поддержка 10
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -ms-
Opera Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 10.1 — 15
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка 2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 26
Полная поддержка 26
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Замечания Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
Замечания Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 10.1 — 14
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 1.5
Полная поддержка 1.5
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-
GradientsChrome Нет поддержки НетEdge Нет поддержки 12 — 79Firefox Нет поддержки НетIE Полная поддержка 10Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

[2] PPK test

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