W3docs
de
Anmelden

CSS transition-property Eigenschaft

Wie man die CSS-Eigenschaft transition-property verwendet, um eine Eigenschaft für den Übergangseffekt festzulegen. Werte und Beispiele.

Die CSS-Eigenschaft transition-property legt fest, welche Eigenschaften eines Elements animiert werden sollen, wenn sich ihre Werte ändern. Sie akzeptiert eine durch Kommas getrennte Liste von Eigenschaftsnamen oder das Schlüsselwort all, um jede animierbare Eigenschaft des Elements zu übergehen.

Allein bewirkt transition-property nichts Sichtbares — sie benennt nur die Ziele. Außerdem wird eine transition-duration größer als 0s benötigt, damit die Änderung schrittweise statt sofort erfolgt. In den meisten Fällen werden alle vier Parameter gleichzeitig mit der transition-Kurzschreibweise gesetzt; transition-property ist die Langform, die man verwendet, wenn man das Timing jeder Eigenschaft einzeln steuern möchte.

transition-property ist eine der CSS3-Eigenschaften.

Was kann und was kann nicht übergegangen werden

Eine Eigenschaft ist nur dann animierbar, wenn CSS weiß, wie die Zwischenwerte von einem Start- zu einem Endwert berechnet werden. Als Faustregel gilt:

  • Übergansfähig: alles mit einem numerischen oder Farbwert — width, height, opacity, color, background-color, transform, left/top, font-size, letter-spacing, box-shadow und so weiter.
  • Nicht übergangsfähig: diskrete Schlüsselwortwerte ohne sinnvollen Mittelpunkt — display, position, float, font-family. Das Ändern dieser Werte erfolgt sofort, auch wenn sie in transition-property aufgeführt sind.
Warnung

Nicht alle CSS-Eigenschaften können übergegangen werden. Das Auflisten einer nicht animierbaren Eigenschaft (wie display) hat keinen Effekt — die Änderung erfolgt einfach sofort.

Info

Vendor-Präfixe (z. B. -webkit-, -moz-, -o-) sind für CSS-Übergänge in modernen Browsern nicht mehr erforderlich.

Anfangswertall
Gilt fürAlle Elemente, ::before- und ::after-Pseudoelemente.
VererbtNein.
AnimierbarNein (steuert, welche Eigenschaften animiert werden, ist aber selbst nicht animierbar).
VersionCSS3
DOM-Syntaxobject.style.transitionProperty = "height";

Hinweis: In modernem CSS wird empfohlen, stattdessen die Kurzschreibweise transition zu verwenden.

Syntax

CSS transition-property Werte

transition-property: none | all | property | initial | inherit;

Beispiel der transition-property-Eigenschaft:

CSS transition-property Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Hier wird nur height animiert. Da width nicht aufgeführt ist, würde es sofort springen, wenn es sich ändert — genau deshalb ist das Benennen von Eigenschaften wichtig.

Beispiel der transition-property-Eigenschaft mit übergangenem width und height:

CSS transition-property weiteres Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Die zwei Eigenschaftsnamen sind durch ein Komma getrennt. Man könnte auch transition-property: all schreiben, um beide gleichzeitig zu animieren, aber das explizite Auflisten verhindert, dass versehentlich Eigenschaften animiert werden, die man nicht beabsichtigt.

Beispiel der transition-property-Eigenschaft mit übergangenem Hintergrundfarbe:

Beispiel von transition-property mit übergegangener Hintergrundfarbe:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Beispiel der transition-property-Eigenschaft mit übergangenem Hintergrundfarbe und left-Versatz:

Beispiel von transition-property mit übergegangener Hintergrundfarbe und left-Versatz

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>
Probier es selbst »

Beachten Sie, wie die durch Kommas getrennte Liste nach Position zugeordnet wird: Die erste Eigenschaft (background-color) verwendet die erste Dauer und die erste Timing-Funktion, während die zweite Eigenschaft (left) jeweils die zweite verwendet. Diese positionelle Zuordnung ermöglicht es, dass jede Eigenschaft mit ihrer eigenen transition-duration und transition-timing-function animiert wird — etwas, das das Schlüsselwort all nicht leisten kann.

Beispiel der transition-property-Eigenschaft mit übergegangener Schrift:

Beispiel von CSS transition-property mit letter-spacing, font-size und line-height Eigenschaften

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
noneEs wird kein Übergangseffekt angezeigt.
allDer Übergangseffekt wird auf alle Eigenschaften angewendet.
propertyGibt eine durch Kommas getrennte Liste von CSS-Eigenschaftsnamen für den Übergangseffekt an.
initialSetzt diese Eigenschaft auf ihren Standardwert.
inheritErbt diese Eigenschaft vom übergeordneten Element.

Verwandte Eigenschaften

transition-property ist eine von vier Langformen, die einen Übergang bilden. Sie werden fast immer zusammen verwendet:

Übung

Übung
Welche Aussage über transition-property ist korrekt?
Welche Aussage über transition-property ist korrekt?
Was this page helpful?