Важно: стоит учитывать, что данный функционал не работает в IE9 и более старых браузерах.
Свойство CSS transition-duration отвечает за то, как долго будет длиться анимация перехода. Вы можете задавать этот временной интервал в секундах (s) или миллисекундах (ms).
Здесь есть интересный нюанс: вы вполне можете прописать несколько значений длительности через запятую. Каждое новое значение будет автоматически применяться к соответствующему свойству, порядок которого задан в transition-property. Если список длительностей короче, чем количество свойств, то значения начнут подставляться по кругу. А если их больше, чем нужно - лишние просто отбросятся системой.
Совет: обязательно указывайте значение для transition-duration! Если вы пропустите этот параметр, длительность станет равной 0, и, к сожалению, визуального эффекта перехода вы так и не увидите.
| Значение по умолчанию: | 0 |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionDuration="5s" |
| Значение | Описание |
| время | Указывает, сколько секунд(s) или миллисекунд(ms) будет продолжительность анимации перехода. |
Пример !DOCTYPE html html head meta charset="utf-8" titleНазвание документа/title style div { width: 100px; height: 100px; } #test1 { background-color: red; transition-property: width; transition-duration: 3s; } #test1:hover { width: 600px; } #test2 { background-color: blue; transition-property: width, height; transition-duration: 3s, 6s; } #test2:hover { width: 600px; height: 300px; } /style /head body pНаведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.p div id="test1"/div div id="test2"/div /body /html Что покажет этот код в действии:
Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.