css властивість animation-duration
Властивість animation-duration задає час в секундах або мілісекундах, скільки повинен тривати один цикл анімації. Без задання значення дорівнює 0s, це означає, що ніякої анімації немає.
Можна вказати кілька значень, перераховуючи їх через кому. Негативні значення і значення без вказівки одиниць часу (s або ms) неприпустимі і будуть ігноруватися.
animation-duration приймає в якості значення час. Наприклад, 3s задає, що один цикл анімації демонструватиметься протягом 3 секунд. Більші значення роблять анімації більш плавнішими, менші - роблять анімації швидшими.
| Порада: | Рекомендується використовувати універсальну властивість |
| Порада: | Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перше значення у формі часу, розглядається як |
Синтаксис
animation-duration: time|initial|inherit;Властивість animation-duration може отримувати 3 значення:
| Значення без задання: | 0s |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animationDuration="3s" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| animation-duration | 43.0 |
10.0 |
16.0 |
9.0 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| animation-duration | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Демонстрація дії різних значень
Простий приклад
Приклад роботи властивості