Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
Свойство animation-duration устанавливает длительность анимации во времени за один цикл.
Значение по умолчанию 0s определяет, что анимация не должна выполняться.
Удобно использовать сокращенное свойство animation чтобы установить сразу все свойства анимации.
| Начальное значение | 0s |
|---|---|
| Применяется к | все элементы, ::before и ::after псевдоэлементы |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как указано |
| Animation type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Синтаксис
animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;
Примеры
<time>
- Длительность анимации определяется в секундах
sили в миллисекундахms. По умолчанию стоит значение0s. Отрицательные значения являются недействительными.
Предупреждение: Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными
0s.Формальный синтаксис
Примеры
Смотрите для примеров CSS анимации.
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| CSS Animations Определение 'animation-duration' в этой спецификации. |
Рабочий черновик | Начальное определение |
Совместимость с браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!