transition

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Краткое описание

Свойство CSS transition - это сокращенное свойство для transition-property, transition-duration, transition-timing-function, и transition-delay. Оно позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :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-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>, <number>, <number>, <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' в этой спецификации.		 Рабочий черновик Изначальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0 -webkit
26.0 #		 4.0 (2.0) -moz
16.0 (16.0)[1]		 10.0 10.1 -o
12.10 #		 3.0 -webkit
6.1
Градиенты[2] Нет Нет 10.0 Нет Нет
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)[1]		 10.0 10.0 -o
12.10 #		 3.2 -webkit
Градиенты[1] Нет Нет 10.0 Нет Нет

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] PPK test

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

Связанные темы