CSS transition-Eigenschaft

Die CSS-Eigenschaft transition ist eine Kurzschreibweise (Shorthand) für die folgenden Eigenschaften:

Die transition-Eigenschaft ist eine der CSS3-Eigenschaften.

Die Werte für transition-duration und transition-delay können in beliebiger Reihenfolge angegeben werden. Wird transition-duration jedoch weggelassen, beträgt der Standardwert 0s, wodurch die Animation der Transition verhindert wird.

Die Eigenschaften werden durch Kommas getrennt.

INFO

Der Wert none ist gültig und deaktiviert Transitionen für die angegebenen Eigenschaften.

Die transition-Eigenschaft ermöglicht die Definition eines Übergangs zwischen zwei Zuständen eines Elements. Verschiedene Zustände können mithilfe von Pseudo-Klassen wie :hover oder :active oder mit Hilfe von JavaScript definiert werden.

INFO

Vendor-Prefixes wie -webkit-, -moz- und -o- sind veraltet und für moderne Browser in der Regel nicht mehr erforderlich.

Anfangswert	all 0s ease 0s
Gilt für	Alle Elemente, ::before und ::after Pseudo-Elemente.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	Object.style.transition = "all 3s";

Syntax

Syntax der CSS transition-Eigenschaft

css

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Beispiel für die transition-Eigenschaft mit der :active-Pseudo-Klasse:

Beispiel für die CSS transition-Eigenschaft

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Beispiel für die transition-Eigenschaft mit der :hover-Pseudo-Klasse:

Beispiel für die CSS transition-Eigenschaft mit :hover-Pseudo-Klasse

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;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
transition-property	Gibt die Namen der Eigenschaften für die Transition an.
transition-duration	Gibt die Dauer der Transition-Animation an.
transition-timing-function	Gibt die zeitliche Geschwindigkeit an, mit der ein Objekt von einem Wert zu einem anderen übergeht.
transition-delay	Gibt die Wartezeit an, bevor ein Transition-Effekt animiert wird.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Welche Eigenschaften der CSS-Transition können geändert werden?

CSS transition-Eigenschaft ​

Syntax ​

Beispiel für die transition-Eigenschaft mit der :active-Pseudo-Klasse: ​

Beispiel für die transition-Eigenschaft mit der :hover-Pseudo-Klasse: ​