transition-duration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die transition-duration CSS Eigenschaft legt die Zeitspanne fest, die eine Übergangsanimation zur Vollendung benötigen soll. Standardmäßig ist der Wert 0s, was bedeutet, dass keine Animation stattfinden wird.

Probieren Sie es aus

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: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

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

Sie können mehrere Zeitspannen angeben; jede Zeitspanne wird auf die entsprechende Eigenschaft angewendet, wie sie von der transition-property Eigenschaft spezifiziert ist, die als Masterliste fungiert. Wenn die Anzahl der angegebenen Zeitspannen kleiner als in der Masterliste ist, wiederholt der User-Agent die Liste der Zeitspannen. Ist die Anzahl der angegebenen Zeitspannen größer als in der Masterliste, wird die Liste auf die richtige Größe gekürzt. In beiden Fällen bleibt die CSS-Deklaration gültig.

Syntax

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;

Werte

<time>: Ist ein <time>, das die Dauer des Übergangs vom alten Wert einer Eigenschaft zum neuen Wert angibt. Eine Zeit von 0s zeigt an, dass kein Übergang stattfindet, also der Wechsel zwischen den beiden Zuständen unmittelbar erfolgt. Ein negativer Wert für die Zeit macht die Deklaration ungültig.

Formale Definition

Anfangswert	`0s`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

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

Beispiele

Beispiel mit verschiedenen Zeitdauern

HTML

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

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);

Ergebnis

Spezifikationen

Specification
CSS Transitions # transition-duration-property