Свойство CSS transition-duration
Как использовать свойство CSS transition-duration для задания длительности анимации. Значения свойства и примеры использования.
Свойство CSS transition-duration определяет, сколько времени занимает переходная анимация от начального состояния до конечного. Оно входит в число свойств CSS3 и является отдельным компонентом сокращённого свойства transition.
В этой главе объясняется, как правильно записывать значения длительности, чем отличается одно значение от списка через запятую, на что обращать внимание (нулевые значения, отсутствие единиц, несоответствие количества элементов в списке), а также как это свойство связано с остальными свойствами семейства transition — transition-property, transition-timing-function и transition-delay.
Как записывается длительность
Длительность — это одно значение типа <time>, заданное в секундах (s) или миллисекундах (ms):
transition-duration: 0.5s; /* half a second */
transition-duration: 500ms; /* the same thing */Несколько важных правил:
- Единица измерения обязательна. Значение без единицы, например
transition-duration: 2, является недействительным, и вся декларация игнорируется. Всегда пишите2sили2000ms. - Отрицательные значения недопустимы. В отличие от transition-delay, длительность не может быть отрицательной; браузер воспринимает отрицательное значение как
0s. 0sозначает отсутствие видимого перехода. Это значение по умолчанию, при котором изменение свойства происходит мгновенно. Чтобы анимация была заметна, необходимо задать ненулевую длительность.
Несколько значений длительности
Можно указать одно или несколько значений длительности через запятую. Каждое значение применяется к соответствующему свойству из списка transition-property, который является основным:
transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */Если значений длительности меньше, чем свойств, список длительностей повторяется до заполнения. Если значений больше, чем свойств, лишние длительности игнорируются:
/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;Вендорные префиксы (такие как -webkit-, -moz-, -o-) для современных браузеров больше не требуются, поскольку transition-duration полностью поддерживается во всех актуальных версиях.
| Начальное значение | 0s |
|---|---|
| Применяется к | Всем элементам, псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.transitionDuration = "3s"; |
Синтаксис
Значения CSS transition-duration
transition-duration: time | initial | inherit;Пример свойства transition-duration:
Пример кода CSS transition-duration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #666;
transition-duration: 2s;
}
div:hover {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition-duration property example</h2>
<div></div>
</body>
</html>Наведите курсор на серый блок: поскольку transition-duration равно 2s, ширина плавно увеличивается в течение двух секунд, а не меняется мгновенно.
Пример свойства transition-duration со значением "time":
Ещё один пример кода CSS transition-duration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.example {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
position: relative;
transition-property: background-color, left;
transition-timing-function: linear, linear;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-duration: .3s, .3s;
}
.el2 {
transition-duration: .6s, .6s;
}
.el3 {
transition-duration: 1s, 1s;
}
.el4 {
transition-duration: 2s, 2s;
}
</style>
</head>
<body>
<h2>Transition-duration property example</h2>
<div class="container">
<p>
<code>transition-duration: .3s, .3s;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-duration: .6s, .6s;</code>
</p>
<div class="example el2"></div>
<p>
<code>transition-duration: 1s, 1s;</code>
</p>
<div class="example el3"></div>
<p>
<code>transition-duration: 2s, 2s;</code>
</p>
<div class="example el4"></div>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| time | Задаёт количество секунд или миллисекунд, за которые должен завершиться эффект перехода. Значение по умолчанию — 0s. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
transition-duration редко используется отдельно. На практике оно применяется вместе с другими отдельными свойствами transition, как правило через сокращённое свойство transition:
- transition-property — какие CSS-свойства анимируются.
- transition-timing-function — кривая ускорения (ease, linear, cubic-bezier).
- transition-delay — время ожидания перед началом перехода.
Для многошагового движения, которое нельзя выразить как одиночное изменение от A до B, используйте CSS-анимации.