Свойство transition
Пример style.transition
Наведите указатель мыши на элемент div, чтобы постепенно изменить его внешний вид:
document.getElementById("myDIV").style.transition = "all 2s";
Попробуйте сами »
Описание transition
Свойство transition — это сокращенное свойство для четырех свойств transition:
transitionProperty, transitionDuration, transitionTimingFunction и transitionDelay.
Примечание: Всегда указывайте свойство transitionDuration, в противном случае длительность будет равна 0, и переход не будет иметь никакого эффекта.
Поддержка transition
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данное свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Синтаксис transition
Вернуть свойство transition:
object.style.transition
Установите свойство transition:
object.style.transition = "property duration timing-function delay|initial|inherit"
Значение свойства transition
| Значение | Описание |
|---|---|
| transitionProperty | Указывает имя свойства CSS, для которого предназначен эффект перехода |
| transitionDuration | Указывает, сколько секунд или миллисекунд требуется эффекту перехода для завершения |
| transitionTimingFunction | Указывает кривую скорости эффекта перехода |
| transitionDelay | Определяет, когда начнется эффект перехода |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали transition
| Значение по умолчанию: | all 0 ease 0 |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство перехода элемента. |
| CSS Версия | CSS3 |
Связанные страницы transition
CSS Справочник: Свойство transition