CSS стиль transition-duration. Задание длительности анимации с помощью transition-duration
CSS стиль transition-duration задает продолжительность анимации. По умолчанию это значение равно 0s.
Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition-duration.
Opera до версии 12.10 поддерживает свойство -o-transition-duration.
Firefox до версии 16 поддерживает свойство -moz-transition-duration.
В transition-duration можно указать несколько значений, перечисляя их при этом через запятую. Каждое значение будет применяется к свойствам, заданным с помощью CSS свойства transition-property.
Краткая информация по CSS-свойству transform-origin
Значение по умолчанию | 0s (0 секунд) |
Наследуется | Нет |
Применяется | Ко всем элементам и псевдоэлементам ::before и ::after |
Правила написания свойства transition-duration
transition-duration: <время> [,<время>]
Объектная модель
Объект.style.transitionDuration
Пример применения стиля transition-duration
Проиллюстрируем работу transition-duration на примере. Нам нужно, чтобы при наведении курсора на блок с текстом, цвет подложки плавно менялся в течение двух секунд.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля transition-duration</title>
<style>
div {
padding: 20px;
-o-transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
div:hover { background: #ffcc00; }
</style>
</head>
<body>
<div>А ну-ка, наведи!</div>
</body>
</html>