Свойство перехода стиля
Пример
Наведите указатель мыши на элемент div, чтобы постепенно изменить его внешний вид:
document.getElementById("myDIV").style.transition = "all 2s";
Определение и использование
Свойство перехода является сокращенным свойством для четырех свойств перехода:
transitionProperty,transitionDuration,transitionTimingFunctionиtransitionDelay.
Примечание. Всегда указывайте свойство transitionDuration, иначе продолжительность равна 0, и переход не будет иметь никакого эффекта.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Синтаксис
Вернуть свойство перехода:
object.style.transition
Установите свойство перехода:
object.style.transition = "property duration timing-function delay|initial|inherit"
Значения свойств
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Технические детали
Значение по умолчанию: | все 0 облегчить 0 |
---|---|
Возвращаемое значение: | Строка, представляющая свойство перехода элемента |
CSS-версия | CSS3 |
Связанные страницы
Справочник по CSS: свойство перехода
❮ Объект стиля