W3docs
de
Anmelden

CSS transition-property-Eigenschaft

How to use the CSS transition-property longhand property to specify a property name for the transition effect. See property values and try examples.

Die transition-property-Eigenschaft gibt die Namen der Eigenschaften für die transition an. Sie akzeptiert eine durch Kommas getrennte Liste von Eigenschaftsnamen oder das Schlüsselwort all, um alle Eigenschaften eines Elements zu animieren.

Die transition-property ist eine der CSS3-Eigenschaften.

warning

Nicht alle Eigenschaften in CSS können animiert werden.

info

Vendor-Prefixes (z. B. -webkit-, -moz-, -o-) sind für CSS-Transitions in modernen Browsern nicht mehr erforderlich.

Anfangswertall
Anwendbar aufAlle Elemente, ::before und ::after Pseudo-Elemente.
VererbbarNein.
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 für die transition-property-Eigenschaft:

CSS transition-property-Codebeispiel

<!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 »

Beispiel für die transition-property-Eigenschaft mit animierter Breite und Höhe:

CSS transition-property weiteres Codebeispiel

<!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 »

Beispiel für die transition-property-Eigenschaft mit animierter Hintergrundfarbe:

Beispiel für transition-property mit animierter 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 für die transition-property-Eigenschaft mit animierter Hintergrundfarbe und linker Positionsverschiebung:

Beispiel für transition-property mit animierter Hintergrundfarbe und linker Positionsverschiebung

<!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 »

Beispiel für die transition-property-Eigenschaft mit animierter Schriftart:

Beispiel für CSS transition-property mit den Eigenschaften letter-spacing, font-size und line-height

<!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 zurück.
inheritErbt diese Eigenschaft von ihrem übergeordneten Element.

Praxis

Übung

Welche Aussage über transition-property ist korrekt?