CSS-Übergänge

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

CSS-Übergänge

Mit CSS-Übergängen können Sie Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos ändern.

Fahren Sie mit der Maus über das Element unten, um einen CSS-Übergangseffekt zu sehen:

CSS

In diesem Kapitel erfahren Sie mehr über die folgenden Eigenschaften:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Browserunterstützung für Übergänge

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

Wie verwende ich CSS-Übergänge?

Um einen Übergangseffekt zu erstellen, müssen Sie zwei Dinge angeben:

die CSS-Eigenschaft, der Sie einen Effekt hinzufügen möchten
die Dauer der Wirkung

Hinweis: Wenn der Dauerteil nicht angegeben ist, hat der Übergang keine Auswirkung, da der Standardwert 0 ist.

Das folgende Beispiel zeigt ein 100px * 100px großes rotes <div>-Element. Das <div> element hat auch einen Übergangseffekt für die Eigenschaft width mit einer Dauer von 2 Sekunden angegeben:

Beispiel

div
{
  width: 100px;
  height: 100px;
  
background: red;
  transition: width 2s;
}

Der Übergangseffekt beginnt, wenn die angegebene CSS-Eigenschaft (Breite) ihren Wert ändert.

Geben wir nun einen neuen Wert für die Eigenschaft width an, wenn ein Benutzer mit der Maus über das Element <div> fährt:

Beispiel

div:hover
{
  width: 300px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

Beachten Sie, dass sich das Element nach und nach wieder in seinen ursprünglichen Stil zurückverwandelt, wenn sich der Mauszeiger aus dem Element herausbewegt.

Ändern Sie mehrere Eigenschaftswerte

Das folgende Beispiel fügt einen Übergangseffekt für die Eigenschaft „Breite“ und „Höhe“ mit einer Dauer hinzu von 2 Sekunden für die Breite und 4 Sekunden für die Höhe:

Beispiel

div
{
  transition: width 2s, height 4s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Geben Sie die Geschwindigkeitskurve des Übergangs an

Die Eigenschaft transition-timing-function gibt die Geschwindigkeitskurve des Übergangseffekts an.

Die Eigenschaft „transition-timing-function“ kann die folgenden Werte haben:

ease: - Gibt einen Übergangseffekt mit einem langsamen Start, dann schnell und dann langsamem Ende an (dies ist die Standardeinstellung).
linear: - Gibt einen Übergangseffekt mit der gleichen Geschwindigkeit vom Anfang bis zum Ende an
ease-in: - spezifiziert einen Übergangseffekt mit langsamem Start
ease-out: - gibt einen Übergangseffekt mit langsamem Ende an
ease-in-out: - gibt einen Übergangseffekt mit langsamem Start und Ende an
cubic-bezier(n,n,n,n): - Ermöglicht die Definition eigener Werte in einer Kubik-Bezier-Funktion

Das folgende Beispiel zeigt einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:

Beispiel

#div1 {transition-timing-function: linear;}
#div2 
{transition-timing-function: ease;}
#div3 {transition-timing-function: 
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 
{transition-timing-function: ease-in-out;}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

Verzögern Sie den Übergangseffekt

Die Eigenschaft transition-delay gibt eine Verzögerung (in Sekunden) für den Übergangseffekt an.

Das folgende Beispiel weist eine Verzögerung von 1 Sekunde vor dem Start auf:

Beispiel

div {
  
transition-delay: 1s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Übergang + Transformation

Das folgende Beispiel fügt der Transformation einen Übergangseffekt hinzu:

Beispiel

div {
  transition: 
width 2s, height 2s, transform 2s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

Weitere Übergangsbeispiele

Die CSS-Übergangseigenschaften können einzeln wie folgt angegeben werden:

Beispiel

div
{
  transition-property: width;
   
transition-duration: 2s;
   
transition-timing-function: linear;
  transition-delay: 1s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

oder durch Verwendung der Abkürzungseigenschaft transition:

Beispiel

div
{
   
transition: width 2s linear 1s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

CSS-Übergangseigenschaften

In der folgenden Tabelle sind alle CSS-Übergangseigenschaften aufgeführt:

transition: Eine Abkürzungseigenschaft zum Festlegen der vier Übergangseigenschaften in einer einzigen Eigenschaft
transition-delay: Gibt eine Verzögerung (in Sekunden) für den Übergangseffekt an
transition-duration: Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt dauert, bis er abgeschlossen ist
transition-property: Gibt den Namen der CSS-Eigenschaft an, für die der Übergangseffekt gilt
transition-timing-function: Gibt die Geschwindigkeitskurve des Übergangseffekts an