Eine CSS-Animation beschreibt mit Keyframes Abläufe über mehrere Zwischenschritte, die auch ohne Auslöser laufen.
- CSS-Animation (@keyframes)
Ablauf, der über benannte Zwischenschritte beschrieben wird und ohne Zustandswechsel läuft.
Beispiel: „Eine CSS-Animation braucht keinen Auslöser und kann sich wiederholen.“
Zwischenschritte
@keyframes pulsieren {
from { opacity: 1; }
50% { opacity: 0.4; }
to { opacity: 1; }
}
.laedt { animation: pulsieren 1.5s ease-in-out infinite; }Die At-Regel beschreibt die Schritte, die Eigenschaft weist sie zu und legt Dauer, Verlauf und Wiederholung fest. Typische Fälle: Ladeanzeigen, dezente Hinweise, Übergänge beim Einblenden.
Wann Transition genügt
Für einen Wechsel zwischen zwei Zuständen ist die Transition einfacher. Die Animation lohnt bei mehreren Schritten, bei Wiederholung oder wenn etwas von selbst beginnen soll. Auch hier gilt die Rücksicht auf reduzierte Bewegung.