Свойство transition-duration устанавливает время выполнения плавного перехода transition.
Данное свойство входит в свойство-сокращение transition.
См. также transition-property, transition-timing-function, transition-delay.
См. также CSS3 анимацию animation.
Синтаксис
селектор {
transition-duration: время в s или ms;
}
Для анимирования нескольких CSS свойств следует задавать значения через запятую:
селектор {
transition-duration: 2s, 3s;
}
Значения
Значение | Описание |
---|---|
s | Задает время в секундах (например 3s). Можно задавать дробные значения, например, 0.5s - половина секунды. |
ms | Задает время в миллисекундах (например 3ms). Одна секунда - это 1000 миллисекунд. |
Значение по умолчанию: 0s.
Примеры
Пример
Наведите мышкой на блок - он плавно изменит свою ширину за 2 секунды.
#elem {
border: 1px solid black;
-webkit-transition-duration: 2s;
-webkit-transition-property: width;
-moz-transition-duration: 2s;
-moz-transition-property: width;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
Результат выполнения кода:
Пример
Наведите мышкой на блок - он плавно изменит свою ширину и высоту. Причем ширину за 2 секунды, а высоту - за 6:
#elem {
border: 1px solid black;
-webkit-transition-duration: 2s, 6s;
-webkit-transition-property: width, height;
-moz-transition-duration: 2s, 6s;
-moz-transition-property: width, height;
transition-duration: 2s, 6s;
transition-property: width, height;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
Результат выполнения кода: