transition

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

Это свойство является сокращением для следующих свойств CSS:

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

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* property name | duration | behavior */
transition: display 4s allow-discrete;

/* Apply to 2 properties */
transition:
  margin-right 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

/* Global values */
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 мс.

См. как обрабатываются вещи, когда списки значений свойств имеют разную длину. Короче говоря, дополнительные описания переходов, превышающие количество фактически анимируемых свойств, игнорируются.

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         

В этом примере, когда пользователь наводит указатель мыши на элемент, происходит задержка в полсекунды (500ms) перед переходом с продолжительностью две секунды background-color.

HTML

<a class="target">Hover over me</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 transitions
• Использование CSS transitions
• TransitionEvent