Примечание: не поддерживается в IE9 и более ранних версиях.
CSS свойство transition-duration указывает, продолжительность анимации перехода в секундах(s) или миллисекундах(ms).
Допускается указывать более одной продолжительности эффекта перехода, через запятую. Каждая новая продолжительность применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список продолжительности меньше, чем количество свойств в 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
Результат данного примера:
Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.