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

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

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

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

правити

Нотатка

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

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

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

Синтаксис

transition-duration: time|initial|inherit;

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

time

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
transition-duration	26.0 <br> 1.0 -webkit-	16.0 <br> 4.0 -moz-	6.1 <br> 3.0 -webkit-	12.10 <br> 11.6 -o-	12.0	10.0

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

Переглядач
transition-duration	4.4 <br> 2.1 -webkit-	16.0 <br> 4.0 -moz-	3.2 -webkit-

Приклади

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

<div>Наведи: їхатиму 5 секунд</div>

div {
    width: 160px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition-property: width;
    transition-duration: 5s;
}

div:hover {
    width: 300px;
}