CSS3 transition-propertyСвойство

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая поддерживает это свойство.

Числа, непосредственно предшествующие -webkit-, -ms- или -moz-, обозначают первую версию браузера, которая поддерживает свойство с префиксом.

Определение свойства и инструкции по использованию

transition-property — это свойство в CSS3, используемое для указания того, к каким свойствам CSS применяется эффект перехода. Оно позволяет явно указать свойства для перехода, так что при изменении состояния элемента переход применяется только к указанным свойствам, а не ко всем свойствам.

Значением этого свойства может быть имя свойства CSS или ключевое слово all, означающее, что эффект перехода применяется ко всем свойствам.

Например, если вы хотите применять эффект перехода только при изменении цвета, можно написать:

.element {
  transition-property: color;
}

Таким образом, когда цвет элемента .element меняется, возникает эффект перехода.

Если вы хотите применить эффект перехода ко всем свойствам, можно использовать ключевое слово all:

.element {
  transition-property: all;
}

Таким образом, независимо от того, какое свойство изменится, будет возникать эффект перехода.

Вы также можете указать несколько свойств сразу, разделяя их запятыми:

.element {
  transition-property: width, height, opacity;
}

Таким образом, когда изменяются width, height или opacity элемента .element, будет возникать эффект перехода.

Синтаксис

Другие примеры

Наведите курсор на элемент div, чтобы изменить width и height с плавным эффектом перехода.