📘Animationen: CSS zum Leben erwecken

Eine CSS-Animation verändert ein Element über die Zeit. Man beschreibt die Schritte mit @keyframes und wendet sie mit der Eigenschaft animation an.

@keyframes float legt die Schlüsselbilder fest (from → to); animation: float 1s infinite verbindet sie mit dem Element, mit Dauer und Wiederholung.

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
.badge { animation: float 1s infinite alternate; }