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