css властивість animation-duration


Властивість animation-duration задає час в секундах або мілісекундах, скільки повинен тривати один цикл анімації. Без задання значення дорівнює 0s, це означає, що ніякої анімації немає.

Можна вказати кілька значень, перераховуючи їх через кому. Негативні значення і значення без вказівки одиниць часу (s або ms) неприпустимі і будуть ігноруватися.

animation-duration приймає в якості значення час. Наприклад, 3s задає, що один цикл анімації демонструватиметься протягом 3 секунд. Більші значення роблять анімації більш плавнішими, менші - роблять анімації швидшими.

Порада:

Рекомендується використовувати універсальну властивість animation щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

Порада:

Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.

Синтаксис

animation-duration: time|initial|inherit;

Властивість animation-duration може отримувати 3 значення:

time

Визначає тривалість анімації

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивосі від свого батьківського елемента

Значення без задання: 0s
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.animationDuration="3s"

Переглядачі

Переглядач
animation-duration

43.0
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit

12.10
12.0 -webkit-

12.0

Переглядач
animation-duration

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit


Мобільних переглядачів ще не додано.

Приклади


Демонстрація дії різних значень

Простий приклад

Приклад роботи властивості

Додаткові посилання