CSS Transition

Eine CSS Transition sorgt dafür, dass sich CSS-Eigenschaften nicht abrupt, sondern fliessend über eine bestimmte Zeit ändern. Dabei werden die dazwischenliegenden Werte interpoliert – es entsteht ein berechneter Übergang zwischen zwei Zuständen eines Elements, der meist durch eine Benutzeraktion wie :hover oder :focus ausgelöst wird.

---

Syntax

Ohne Transition: Farbe springt sofort von rot zu blau.

div {
  background-color: red;
}
div:hover {
  background-color: blue;
}

Mit transition: Farbe ändert sich weich über 0,5 Sekunden.
Die Eigenschaft transition ist eine Kurzschreibweise.

div {
  background-color: red;
  transition: background-color 0.5s;
}
div:hover {
  background-color: blue;
}

Wichtig: Die transition wird immer im Ausgangszustand definiert, nicht im :hover-Zustand.

---

Die 4 Transition-Eigenschaften

Eine Transition besteht aus diesen vier Bausteinen:

• transition-propertyWelche CSS-Eigenschaft animiert wird
• transition-durationWie lange die Animation dauert
• transition-timing-functionWie sich die Geschwindigkeit über die Zeit verhält
• transition-delayWann die Animation startet

---

1. transition-property

Welche CSS-Eigenschaft soll animiert werden?

transition-property: background-color;

Mehrere Werte können mit Kommas getrennt angegeben werden.

transition-property: width, height;

Alle Werte werden animiert

transition-property: all;

---

2. transition-duration

Wie lange dauert die Animation? Wichtig: Ohne duration → keine sichtbare Animation!

transition-duration: 0.3s;
/* oder */
transition-duration: 300ms;

---

3. transition-timing-function

• linearkonstante Geschwindigkeit von Anfang bis Ende
• easeStandard: sanfter Start, nimmt schnell Geschwindigkeit auf und endet langsam
• ease-inlangsam starten, endet schnell
• ease-out schneller Start, endet langsam
• ease-in-outlangsam starten & enden, in der Mitte ist die Geschwindigkeit am höchsten
• cubic-bezier()komplett individuell cubic-bezier Generator

Timing Functions Demo

---

4. transition-delay

Wann startet die Transition? Ohne Angabe wird sofort gestartet.
Die Animation beginnt 0,2 Sekunden später.

transition-delay: 0.2s;

---

Kurzschreibweise

Alles kann in einer Zeile unter dem Begriff transition geschrieben werden. Damit gewinnst du Übersicht.

transition: background-color 0.5s ease-in-out 0.1s;

Reihenfolge beachten

property | duration | timing-function | delay

Mehrere Transitionen:

transition:
width 0.3s ease,
background-color 0.5s linear;

---

Was kann man animieren?

Fast alle CSS Eigenschaften, die eine Farb-, Länge- oder Positions-Komponente haben, können Transition anwenden.

Gut animierbar sind zum Beispiel:

• color
• background-color
• opacity
• transform
• box-shadow
• border-radius

 background-color, background-image, background-position, border-color, border-width, border-spacing, color,  crop, font-size, font-weight, height, width, letter-spacing, line-height, margin, max-height, max-width, min-height, min-width, opacity,  outline-color, outline-offset, outline-width, padding, text-indent, text-shadow, vertical-align, visibility, word-spacing, z-index, zoom

---

Transition reagiert auf Zustände

Transitions funktionieren, wenn sich ein Zustand ändert. Zum Beispiel bei :hover, :focus, :active

a {
  transition: transform 0.3s ease;
}

a:hover {
  transform: scale(1.1);
} 

---

Kurz gesagt

• transition macht Zustandsänderungen fliessend
• Ohne duration keine sichtbare Animation
• timing-function steuert die Geschwindigkeit
• delay verzögert den Start
• Transitions reagieren auf Zustände wie :hover oder :focus

---

Ressourcen

Intensivstation CodePen

---