css властивість transition-duration
Властивість transition-duration задає час, в секундах або мілісекундах, за скільки часу повинна відпрацювати анімація переходу. Без задання значення дорівнює 0s, це означає, що ніякої анімації немає, перехід відбувається миттєво.
Можна вказати кілька значень, перераховуючи їх через кому. Кожне значення застосовується до властивостей, заданих через transition-property. Змінюючи значення задане для цієї властивості, Ви налаштовуєте швидкість демонстрації ефекту. Більші значення роблять анімацію більш плавною, менші - роблять її швидшою.
Ви можете задавати декілька значень відразу відділивши їх комами. В цьому випадку, кожне значення буде застосоване для окремої властивості, описаної у transition-property. Якщо значень для transition-duration задано більше, ніж для transition-property, список просто обрізається з правої сторони (прибираються зайві значення).
| Нотатка: | Завжди вказуйте властивість |
Синтаксис
transition-duration: time|initial|inherit;Властивість transition-duration може отримувати 3 значення:
| Значення без задання: | 0s |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transitionDuration="1s" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| transition-duration | 26.0 |
10.0 |
16.0 |
6.1 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transition-duration | 4.4 |
16.0 |
3.2 -webkit- |
Мобільних переглядачів ще не додано.
Приклади
Як різні значення впливають на елементи
Простий приклад роботи властивості
Завдання тривалість ефекту переходу - 5 секунд.
div {
-webkit-transition-duration: 5s; /* Safari */
transition-duration: 5s;
}