CSS-свойство `transition-duration`

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

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

Попробуйте

transition-duration: 500ms;
transition-property: margin-right;

transition-duration: 2s;
transition-property: background-color;

transition-duration: 2s;
transition-property: margin-right, color;

transition-duration: 3s, 1s;
transition-property: margin-right, color;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

Синтаксис

/* <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 означает, что переход не будет выполняться, то есть переключение между двумя состояниями произойдёт мгновенно. Отрицательное значение времени делает объявление недопустимым.

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

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

transition-duration = 
  <time>#

Примеры

Пример с разными длительностями

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
• transition-property
• transition-timing-function
• transition-delay
• TransitionEvent