CSS-Animationsgenerator

Anatomie einer Animation

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Acht Eigenschaften in der Kurzschreibweise: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Easing-Optionen

Der Generator bietet sechs Easing-Funktionen:

Animieren Sie die richtigen Eigenschaften

Der Browser kann jede Eigenschaft animieren, aber nur wenige laufen auf der GPU flüssig, ohne Layout oder Paint auszulösen:

Günstig (nur Compositing): transform, opacity, filter.

Teuer (Layout/Paint): width, height, top, left, margin, padding, background-color.

Animationen mit sechzig Bildern pro Sekunde über width und top sind bei kleinen Elementen möglich, brechen aber auf dem Handy ein, wenn Sie viele gleichzeitig animieren. Bevorzugen Sie für komplexe Bewegungen stets transform: translate(...) gegenüber top / left und transform: scale(...) gegenüber animierter Breite/Höhe.

will-change: sparsam einsetzen

Wenn Sie den Browser anweisen, eine Compositing-Ebene vorab anzulegen, kann das die Flüssigkeit verbessern:

.card { will-change: transform; }

Aber es verbraucht Speicher. Setzen Sie es kurz vor dem Auslösen der Animation ein und entfernen Sie es danach. will-change: transform dauerhaft auf vielen Elementen zu setzen, schadet oft mehr, als es nützt.

Reduzierte Bewegung

Manche Nutzer reagieren empfindlich auf Bewegung und setzen Systemeinstellungen:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Respektieren Sie diese Einstellung. Bieten Sie als Fallback eine sofortige Zustandsänderung oder ein sehr dezentes Einblenden an.