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

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

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

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

правити

Порада

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

автор: Svitlana правити

Порада

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

animation-duration: time|initial|inherit;

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

time

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
animation-duration	43.0 <br>3.0 -webkit-	16.0 <br>5.0 -moz-	9.0 <br>4.0 -webkit	12.10 <br>12.0 -webkit-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
animation-duration	2.0 -webkit-	16.0 <br>5.0 -moz-	9.2 <br>4.0 -webkit

Приклади

+ запропонувати свій приклад у пісочниці