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

Свойство transition-property CSS задаёт свойства CSS, к которым следует применить эффект перехода.

Если указать сокращённое свойство (например, background), переход будет применён ко всем его анимируемым подсвойствам.

Попробуйте

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<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%;
}

Синтаксис

/* Keyword values */
transition-property: none;
transition-property: all;

/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

Значения

none

Переходы не применяются ни к каким свойствам.

all

Переходы применяются ко всем свойствам, которые их поддерживают.

<custom-ident>

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

Формальное определение

Формальный синтаксис

transition-property = 
  none |
  <single-transition-property>#

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

Примеры

Базовый пример

При наведении указателя на кнопку или перемещении на неё фокуса цвет кнопки меняется с переходом длительностью в одну секунду; transition-property — это background-color.

HTML

<button class="target">Focus me!</button>

CSS

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  outline: none;
}

.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #cccccc;
}

.target:hover,
.target:focus {
  background-color: #eeeeee;
}

Дополнительные transition-property примеры см. в руководстве Использование переходов CSS.

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

Совместимость с браузерами

См. также

• Использование переходов CSS
• transition
• transition-duration
• transition-timing-function
• transition-delay
• TransitionEvent