Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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> || <single-transition-timing-function> || <time>

где
<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

Примеры

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

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

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

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

Возможность 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

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

Метки документа и участники

 Внесли вклад в эту страницу: AlexN
 Обновлялась последний раз: AlexN,