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

правити

Переглядачі

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

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

Переглядач
	26	16	9	12.1	12	10

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

Переглядач
	4.4	26	16	9

Приклади

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

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

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

div:hover {
    width: 300px;
}

<p>Вибери потрібне значення для <code>transition-duration</code>, а потім наведи курсор на блок, щоб побачити результат дії властивості:</p>

<input type="number" value="1" step="0.1" min="0" id="field"></input>

<div id="block">Привіт :)</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
}

#block {
  width: 150px;
  border-radius: 4px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .45);
  padding: 36px;
  text-align: center;
  background: gold;
  transform: rotateX(15deg);
  margin: 36px auto 0 auto;
  transition: background-color 1s ease-in 0s;
}

#block:hover {
  background-color: yellowgreen;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.transitionDuration = this.value + 's';
};
//# sourceURL=pen.js

<div class="block">
	<code>transition-duration: 0s;</code>
</div>

<div class="block block2">
	<code>transition-duration: .5s;</code>
</div>

body {
	padding: 36px;
}

.block {
	width: 400px;
	background-color: gold;
	color: #444;
	font-size: 15px;
	padding: 16px 8px;
	transition: all 0s ease-out .15s;
	margin-bottom: 36px;
}

.block2 {
	transition-duration: .5s;
}

.block:hover {
	width: 425px;
	color: red;
}