Свойство transition-duration
Описание
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.
Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.
Синтаксис
transition-duration: время;Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='test'></div>
<style>
#test {
width: 150px;
height: 150px;
background-color: rgb(112, 0, 0);
transition: all 1s ease-in-out;
transition-duration: 1s;
margin: 10px;
}
#test:hover {
transform: rotate(90deg);
}
</style>
</body>
</html>Читайте также
Свойство font-size
Определяет размер шрифта элемента.<br><br>Размер может быть установлен несколькими сп...
Свойство transform-origin
Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.
Функция repeating-radial-gradient()
По своему действию похож на радиальный градиент, который делается функцией <span class=&#...
Свойство mix-blend-mode
Указывает режим наложения исходного цвета на фоновый цвет или фоновое изображение.<br><b...
Свойство object-fit
Управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана шир...