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 Dauer einer Übergangsanimation fest. Standardmäßig ist der Wert 0s, was bedeutet, dass keine Animation erfolgt.

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

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

Sie können mehrere Dauern angeben; jede Dauer wird auf die entsprechende Eigenschaft angewendet, wie sie durch die transition-property Eigenschaft, die als Hauptliste fungiert, spezifiziert wird. Wenn die Anzahl der angegebenen Dauern geringer ist als in der Hauptliste, wiederholt der Benutzeragent die Liste der Dauern. Wenn die Anzahl der angegebenen Dauern größer ist als in der Hauptliste, 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>, der die benötigte Zeit angibt, die der Übergang vom alten zum neuen Wert einer Eigenschaft dauern soll. Eine Zeit von 0s bedeutet, dass kein Übergang stattfindet, also der Wechsel zwischen den beiden Zuständen unmittelbar erfolgt. Ein negativer Zeitwert 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, das verschiedene Dauern zeigt

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