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


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

Властивість `transition-duration`

Можна вказати кілька значень, перераховуючи їх через кому. Кожне значення застосовується до властивостей, заданих через transition-property. Змінюючи значення задане для цієї властивості, Ви налаштовуєте швидкість демонстрації ефекту. Більші значення роблять анімацію більш плавною, менші - роблять її швидшою.

Ви можете задавати декілька значень відразу відділивши їх комами. В цьому випадку, кожне значення буде застосоване для окремої властивості, описаної у transition-property. Якщо значень для transition-duration задано більше, ніж для transition-property, список просто обрізається з правої сторони (прибираються зайві значення).

Нотатка:

Завжди вказуйте властивість transition-duration, якщо цього не зробити тривалість переходу буде 0s, тому перехід не матиме ніякого ефекту.

Синтаксис

transition-duration: time|initial|inherit;

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

time

Тривалість переходу (в секундах чи мілісекундах).

initial

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

inherit

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

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

Переглядачі

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

26.0
1.0 -webkit-

10.0

16.0
4.0 -moz-

6.1
3.0 -webkit-

12.10
11.6 -o-

12.0

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

4.4
2.1 -webkit-

16.0
4.0 -moz-

3.2 -webkit-


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

Приклади


Як різні значення впливають на елементи

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

Завдання тривалість ефекту переходу - 5 секунд.

div { 


  -webkit-transition-duration: 5s; /* Safari */ 


  transition-duration: 5s; 


}

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