CSS Übergangseffekte

CSS Übergangseffekte

CSS-Übergänge erlauben es Ihnen, die Werte von Eigenschaften innerhalb einer bestimmten Zeit glatt zu ändern.

Bewegen Sie den Mauszeiger auf dieses Element, um den CSS-Übergangseffekt zu sehen:

CSS

In diesem Kapitel werden Sie folgendes lernen:

  • Übergang
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Browser-Unterstützung für Übergänge

Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Eigenschaft Chrome IE Firefox Safari Opera
Übergang 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 verwendet man CSS-Übergänge?

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

  • Die CSS-Eigenschaft, der Sie eine Wirkung hinzufügen möchten
  • Dauer der Wirkung

Beachten Sie:Wenn keine Zeiteinheit angegeben wird, hat der Übergangseffekt keine Wirkung, da der Standardwert 0 ist.

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

Beispiel

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

Wenn der Wert der angegebenen CSS-Eigenschaft (width) ändert, beginnt der Übergangseffekt.

Lassen Sie uns nun eine neue Wert für die width-Eigenschaft angeben, wenn der Mauszeiger auf dem <div>-Element gehalten wird:

Beispiel

div:hover {
  width: 300px;
}

Probieren Sie es selbst aus

Bitte beachten Sie, dass der Cursor, wenn er von einem Element wegmoved, allmählich zu seinem ursprünglichen Stil zurückkehrt.

Ändern Sie die Werte mehrerer Eigenschaften

Nachstehendes Beispiel fügt sowohl den Übergangseffekt für die Breite als auch für die Höhe hinzu, Breite ist 2 Sekunden, Höhe ist 4 Sekunden:

Beispiel

div {
  transition: Breite 2s, Höhe 4s;
}

Probieren Sie es selbst aus

Definition der Geschwindigkeitskurve des Übergangs

transition-timing-function Die Eigenschaft legt die Geschwindigkeitskurve des Übergangseffekts fest.

Der transition-timing-function-Attribute akzeptiert folgende Werte:

  • ease - Legt fest, dass der Übergangseffekt langsam beginnt, dann beschleunigt und schließlich wieder langsam endet (Standard)
  • linear - Legt fest, dass der Übergang von Anfang bis Ende mit gleicher Geschwindigkeit erfolgt
  • ease-in - Legt fest, dass der Übergang langsamer beginnt
  • ease-out - Legt fest, dass der Übergang langsamer endet
  • ease-in-out - Legt fest, dass der Übergang langsamer beginnt und endet
  • cubic-bezier(n,n,n,n) - Ermöglicht es Ihnen, Ihre eigenen Werte in dreifachen Quadratischen-Beziffern zu definieren

Nachstehende Beispiele zeigen 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

Verzögerte Übergangseffekte

transition-delay Die Eigenschaft legt die Verzögerung des Übergangseffekts (in Sekunden) fest.

Nachstehendes Beispiel hat eine Verzögerung von 1 Sekunde vor dem Start:

Beispiel

div {
  transition-delay: 1s;
}

Probieren Sie es selbst aus

Übergang + Transformation

Nachstehendes Beispiel zeigt, wie Übergangseffekte zu einer Transformation hinzugefügt werden können:

Beispiel

div {
  transition: Breite 2s, Höhe 2s, Transform 2s;
}

Probieren Sie es selbst aus

Mehr Übergangsbeispiele

Sie können die CSS-Übergangseigenschaften wie folgt einzeln angeben:

Beispiel

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

Probieren Sie es selbst aus

oder verwenden Sie die Kurzform Übergang Eigenschaft:

Beispiel

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

Probieren Sie es selbst aus

CSS-Übergangseigenschaften

Nachstehend ist eine Liste aller CSS-Übergangseigenschaften aufgeführt:

Eigenschaft Beschreibung
Übergang Kurzformular, um die vier Übergangseigenschaften in eine einzige Eigenschaft zu setzen.
transition-delay Definiert die Verzögerung der Übergangseffekte in Sekunden.
transition-duration Definiert die Dauer der Übergangseffekte in Sekunden oder Millisekunden.
transition-property Definiert den Namen der CSS-Eigenschaft, die durch den Übergangseffekt beeinflusst wird.
transition-timing-function Definiert die Geschwindigkeitskurve für die Übergangseffekte.