transition-duration

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство transition-duration CSS задаёт длительность анимации перехода. По умолчанию значение равно 0s, что означает отсутствие анимации.

Попробовать

Можно указать несколько длительностей; каждая длительность будет применена к соответствующему свойству, как указано свойством transition-property, которое является списком свойств. Если количество указанных длительностей меньше, чем в списке, пользовательский агент повторяет список длительностей. Если количество указанных длительностей больше, чем в списке, список усекается до нужного размера. В обоих случаях объявление CSS остаётся валидным.

Синтаксис

/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: revert;
transition-duration: revert-layer;
transition-duration: unset;

Значения

<time>: Это <time>, определяющее время перехода от старого значения свойства к новому. Значение 0s указывает на отсутствие перехода, то есть изменение между двумя состояниями будет мгновенным. Отрицательное значение времени делает объявление невалидным.

Формальное определение

Начальное значение	`0s`
Применимо к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

Формальный синтаксис

transition-duration = 
  <time [0s,∞]>#

Примеры

Пример, демонстрирующий различные длительности

HTML

<div class="box duration-1">0.5 seconds</div>

<div class="box duration-2">2 seconds</div>

<div class="box duration-3">4 seconds</div>

<button id="change">Change</button>

CSS

.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}

JavaScript

function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

Результат

Спецификации

Спецификация
CSS Переходы # transition-duration-property

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`transition-duration`	261	1212	16494–preview	12.11510–15	93.1	2618	16494	12.11410.1–14	92	1.51.0	4.42

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration