Свойство CSS `transition`

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

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

Попробуйте

transition: margin-right 2s;

transition: margin-right 2s 0.5s;

transition: margin-right 2s ease-in-out;

transition: margin-right 2s ease-in-out 0.5s;

transition:
  margin-right 2s,
  color 1s;

transition: all 1s ease-out;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

Составные свойства

Это сокращённое свойство для следующих свойств 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> ||
  <transition-behavior-value>

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

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

<transition-behavior-value> = 
  normal |
  allow-discrete

<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>? )

<integer> = 
  <number-token>

<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
• Использование переходов CSS
• TransitionEvent