Свойство style.transition

Определение и использование

transition Свойство является сокращенной формой четырех свойств перехода:

Комментарии:Всегда указывайте Атрибут transitionDurationВ противном случае продолжительность составляет 0, и переход будет недействителен.

Дополнительная информация:

CSS-справочник:Атрибут transition

Пример

Поместите мышь над элементом div, чтобы постепенно изменить его вид:

document.getElementById("myDIV").style.transition = "all 2s";

Попробуйте сами

Синтаксис

Возврат атрибута transition:

object.style.transition

Установить атрибут transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Значение свойства

Значение Описание
transitionProperty Определяет имя CSS-свойства, на которое направлен эффект перехода.
transitionDuration Определяет, сколько секунд или миллисекунд потребуется для завершения эффекта перехода.
transitionTimingFunction Определяет кривую скорости эффекта перехода.
transitionDelay Определяет, когда начинается эффект перехода.
initial Установить это свойство в его значение по умолчанию. См. initial.
inherit Эта свойство наследуется от родительского элемента. См. inherit.

Технические детали

Дефолтное значение: all 0 ease 0
Возвратное значение: строка, представляющая Атрибут transition.
Версия CSS: CSS3

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1