CSS transition-duration-Eigenschaft

Die transition-duration-Eigenschaft definiert, wie lange die Übergangsanimation dauern soll.

Die transition-duration-Eigenschaft ist eine der CSS3-Eigenschaften.

Es können eine oder mehrere durch Kommas getrennte Dauern angegeben werden. Jede Dauer wird auf die entsprechende Eigenschaft angewendet, die durch die CSS transition-property definiert ist. Die Liste der transition-property-Werte fungiert als Hauptliste; wenn es weniger Dauern als Eigenschaften gibt, wird die Liste der Dauern wiederholt. Wenn mehr Dauern angegeben sind, wird die Liste gekürzt.

Der Standardwert ist 0s, was bedeutet, dass die Übergangsanimation keine Wirkung zeigt.

INFO

Vendor-Prefixes (wie -webkit-, -moz-, -o-) sind für moderne Browser nicht mehr erforderlich, da transition-duration in allen aktuellen Versionen vollständig unterstützt wird.

Anfangswert	0s
Gilt für	Alle Elemente, ::before- und ::after-Pseudo-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.transitionDuration = "3s";

Syntax

CSS transition-duration-Werte

css

transition-duration: time | initial | inherit;

Beispiel für die transition-duration-Eigenschaft:

CSS transition-duration-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Beispiel für die transition-duration-Eigenschaft mit dem Wert „time“:

CSS transition-duration weiteres Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .example {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
time	Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt dauern soll. Der Standardwert ist 0s.
initial	Setzt diese Eigenschaft auf ihren Standardwert.
inherit	Erbt diese Eigenschaft von ihrem übergeordneten Element.

Praxis

Welche Aussage ist falsch bezüglich der transition-duration-Eigenschaft?

Ihr Standardwert ist 0s.Es kann nur eine Dauer angegeben werden.Sie kann auf ::before- und ::after-Pseudo-Elemente angewendet werden.

CSS transition-duration-Eigenschaft ​

Syntax ​

Beispiel für die transition-duration-Eigenschaft: ​

Beispiel für die transition-duration-Eigenschaft mit dem Wert „time“: ​