transition-property

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

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

Попробовать

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

Синтаксис

/* 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>: Строка, идентифицирующая свойство, к которому должен быть применён переходной эффект при изменении его значения.

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

Начальное значение	all
Применяется к	всем элементам, `::before` и `::after` псевдоэлементам
Унаследованно	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

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

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

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

Примеры

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

При наведении курсора или фокусировке на кнопке происходит переход цвета за одну секунду; transition-property background-color.

HTML

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

CSS

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

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

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

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

Спецификация
CSS-переходы # transition-property-property

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`IDENT_value`	1	12	16	15	4	18	16	14	3	1.0	4.4
`transition-property`	261	1212	16494–preview	12.11511.6–15	93.1	2618	16494	12.11412–14	92	1.51.0	4.44.4
`all`	1	12	4	15	3.1	18	4	14	2	1.0	4.4
`none`	1	12	4	15	3.1	18	4	14	2	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property