Свойство CSS animation-duration
Свойство animation-duration определяет время одного цикла анимации. Примеры и возможность проверить самостоятельно.
Свойство animation-duration определяет продолжительность (в секундах или миллисекундах), за которую анимация завершает один цикл. Один цикл — это однократное воспроизведение от ключевого кадра 0% до ключевого кадра 100%; при повторении анимации эта продолжительность применяется к каждому повторению, а не к общему времени воспроизведения. Очень часто для одновременной установки всех свойств анимации используется сокращённое свойство animation, однако задание animation-duration отдельно удобно тогда, когда нужно изменить только временные параметры, сохранив остальные значения сокращённой записи нетронутыми.
Значение по умолчанию — 0s, то есть анимация завершается мгновенно, и ключевые кадры не оказывают видимого эффекта. Это наиболее распространённая причина, по которой анимация «не работает»: правило @keyframes и animation-name заданы правильно, но продолжительность не установлена. Для того чтобы анимация была видна, ей всегда необходимо ненулевое значение продолжительности.
Отрицательные значения недопустимы и приводят к игнорированию свойства (в некоторых более ранних реализациях они могут обрабатываться как 0s). Если нужна задержка перед началом, используйте animation-delay — отрицательное значение задержки там допустимо и запускает анимацию с середины цикла.
Взаимодействие продолжительности с другими свойствами анимации
Продолжительность — лишь одна составляющая анимации. Она работает совместно со следующими свойствами:
- animation-name — какое правило
@keyframesзапускать (обязательно для того, чтобы что-то произошло). - animation-timing-function — кривая скорости внутри продолжительности (
ease,linearи т. д.). - animation-iteration-count — сколько раз повторяется продолжительность (
infiniteдля бесконечного цикла). - animation-delay — как долго ждать перед началом первого цикла.
Например, animation: pulse 2s ease-in-out 3 запускает ключевые кадры pulse три раза, каждый цикл длится 2 секунды, итого 6 секунд движения.
Если для какого-либо свойства анимации задано несколько разделённых запятой значений, они применяются по порядку к соответствующим анимациям, определённым в animation-name. Если значений продолжительности больше, чем имён, лишние значения игнорируются; если меньше — список повторяется с начала. Например, при двух именах анимации и animation-duration: 1s, 2s, 3s третье значение отбрасывается; при animation-duration: 1s обе анимации используют 1s.
Секунды и миллисекунды
1s и 1000ms эквивалентны — используйте то, что читается понятнее. Миллисекунды удобны для коротких UI-переходов (250ms), секунды — для продолжительного циклического движения (6s). Единица измерения обязательна: animation-duration: 2 (без единицы) недопустимо, и объявление игнорируется.
Свойство animation-duration является одним из свойств CSS3.
| Начальное значение | 0s |
|---|---|
| Применяется к | Всем элементам, псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.animationDuration = "4s"; |
Синтаксис
Синтаксис свойства CSS animation-duration
animation-duration: time | initial | inherit;Пример свойства animation-duration:
Пример свойства CSS animation-duration с указанием секунд
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>Пример свойства animation-duration с продолжительностью 6 секунд:
Пример свойства CSS animation-duration с 6 секундами
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: nudge 6s ease infinite alternate;
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
60% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| time | Задаёт продолжительность одного цикла анимации. Значения могут быть указаны в секундах (s) или миллисекундах (ms). Обратите внимание, что значение по умолчанию самого свойства равно 0s, а не ключевому слову time. | Попробовать » |
| initial | Устанавливает значение свойства по умолчанию (0s). | |
| inherit | Наследует значение свойства от родительского элемента. |
Поддержка браузерами
animation-duration поддерживается во всех современных браузерах. Свойство не наследуется и само по себе не анимируется — изменение продолжительности в процессе анимации перезапускает отсчёт времени, а не плавно переходит к новому значению.
Связанные свойства
- animation — сокращённое свойство, задающее продолжительность вместе с именем, временно́й функцией, задержкой и другими параметрами.
- animation-name — задаёт имя правила
@keyframesдля запуска. - animation-delay — задерживает начало анимации.
- animation-iteration-count — повторяет продолжительность заданное количество раз.
- animation-timing-function — задаёт кривую скорости в пределах продолжительности.
- animation-fill-mode — управляет стилями до и после выполнения анимации.