transition ·
transform ·
@keyframes ·
animation ·
easing ·
delay
CSS-Animationen bringen Webseiten zum Leben. Mit Transitionen und Keyframe-Animationen können Sie flüssige Übergänge und komplexe Bewegungen erzeugen – ganz ohne JavaScript.
transition ermöglicht sanfte Übergänge zwischen Zuständen (z.B. Hover, Fokus). Sie definieren, welche Eigenschaft wie lange und mit welcher Kurve animiert wird.
| Eigenschaft | Beschreibung | Beispiel |
|---|---|---|
| transition-property | Welche Eigenschaft animiert wird | all, background-color, transform |
| transition-duration | Dauer der Animation | 0.3s, 300ms |
| transition-timing-function | Beschleunigungskurve | ease, linear, ease-in-out |
| transition-delay | Verzögerung vor Start | 0.2s, 200ms |
transition: all in Produktionscode, da dies alle Eigenschaften animiert und die Performance beeinträchtigen kann. Nennen Sie stattdessen nur die benötigten Eigenschaften.
transform verändert die Darstellung von Elementen – sie können verschoben, gedreht, skaliert oder verzerrt werden. Transform arbeitet im eigenen Koordinatensystem und beeinflusst das Layout nicht.
| Funktion | Beschreibung | Beispiel |
|---|---|---|
| translate(x, y) | Verschiebung | translate(50px, 20px) |
| scale(x, y) | Skalierung (x,y) | scale(1.5, 1.5) |
| rotate(deg) | Drehung (Grad) | rotate(45deg) |
| skew(x, y) | Verzerrung | skew(10deg, 5deg) |
| translateX(x) | Horizontal verschieben | translateX(50px) |
| translateY(y) | Vertikal verschieben | translateY(20px) |
| scaleX(x) | Horizontal skalieren | scaleX(0.5) |
| scaleY(y) | Vertikal skalieren | scaleY(1.5) |
| rotateX(deg) | 3D-Drehung um X-Achse | rotateX(30deg) |
| rotateY(deg) | 3D-Drehung um Y-Achse | rotateY(30deg) |
transform und opacity – diese Eigenschaften werden von der GPU beschleunigt und sind performanter als left, top oder width.
@keyframes definiert den Ablauf einer Animation mit Schlüsselbildern (Keyframes). Sie können from und to oder Prozentwerte (0%, 50%, 100%) verwenden.
from und to sind Kurzformen für 0% und 100%.
animation wendet eine @keyframes-Animation auf ein Element an. Sie steuert Dauer, Verzögerung, Wiederholungen und die Richtung der Animation.
| Eigenschaft | Beschreibung | Beispiel |
|---|---|---|
| animation-name | Name der @keyframes-Animation | slideIn |
| animation-duration | Dauer der Animation | 0.6s, 600ms |
| animation-timing-function | Beschleunigungskurve | ease, linear, ease-in-out |
| animation-delay | Verzögerung vor Start | 0.2s |
| animation-iteration-count | Wiederholungen | 1, 3, infinite |
| animation-direction | Richtung der Animation | normal, reverse, alternate |
| animation-fill-mode | Zustand vor/nach Animation | forwards, backwards, both |
| animation-play-state | Pausieren/Abspielen | running, paused |
infinite für Endlosschleifen wie Lade-Animationen. Mit forwards bleibt das Element im Endzustand der Animation.
Easing-Funktionen definieren die Beschleunigung einer Animation. Sie steuern, ob eine Bewegung gleichmäßig (linear), langsam startend (ease-in) oder langsam endend (ease-out) verläuft.
| Funktion | Beschreibung | cubic-bezier() |
|---|---|---|
| linear | Gleichmäßige Bewegung | cubic-bezier(0, 0, 1, 1) |
| ease | Standard (sanft starten & enden) | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | Langsam starten, schnell enden | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | Schnell starten, langsam enden | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | Langsam starten und enden | cubic-bezier(0.42, 0, 0.58, 1) |
| cubic-bezier() | Benutzerdefinierte Kurve | cubic-bezier(0.4, 0, 0.2, 1) |
ease-out oder ease-in-out. cubic-bezier(0.68, -0.55, 0.265, 1.55) erzeugt einen "Bounce"-Effekt (Überschwingen).
Praktische Beispiele zeigen, wie Sie Animationen für Hover-Effekte, Ladeanimationen und Übergänge einsetzen können.
infinite. Für Hover-Effekte reichen transition und transform – sie sind leicht zu implementieren und performant.
transition
transform
@keyframes
animation
ease
hover
transition: all 0.3s ease ·
transform: scale(1.1) rotate(5deg) ·
animation: slideIn 0.5s ease forwards