transition-duration¶
Свойство transition-duration
задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения.
По умолчанию значение равно 0s
, это означает, что никакой анимации нет, переход происходит мгновенно.
Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property
.
Переходы и Анимации
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Синтаксис¶
/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;
Значения¶
- время.
Примечание¶
- Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство
-webkit-transition-duration
. - Opera до версии 12.10 поддерживает свойство
-o-transition-duration
. - Firefox до версии 16 поддерживает свойство
-moz-transition-duration
.
Значение по-умолчанию: 0s
Применяется ко всем элементам, к псевдоэлементам ::before
и ::after
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transition-duration</title>
<style>
.warn {
padding: 20px;
transition-duration: 2s;
}
.warn:hover {
background: #fc0;
}
</style>
</head>
<body>
<div class="warn">
Вы не учли, что скалярное поле необходимо и
достаточно!
</div>
</body>
</html>