@keyframes

Werte

• from und to – Anfang und Ende, dasselbe wie 0% und 100%.
• Prozente – Zwischenschritte im Bereich 0 bis 100 %. Positionen mit denselben Werten lassen sich mit einem Komma zusammenfassen: 0%, 100% { … }.
• animation-timing-function in einem Keyframe – die Zeitfunktion für den Abschnitt von diesem Keyframe zum nächsten.

Beispiele

Hüpfen – drei Keyframes, Anfang und Ende mit einem Komma zusammengefasst:

.ball {
  animation: bounce 0.8s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -20px; }
}

Schon ein einziger Keyframe genügt. Das fehlende to ergänzt der Browser aus den gewöhnlichen Stilen des Elements, die Animation endet also genau dort, wo das Element normalerweise ist – samt seiner Deckkraft von 0,9:

.message {
  opacity: 0.9;
  animation: slide-in 0.3s ease-out;
}
@keyframes slide-in {
  from {
    opacity: 0;
    translate: 0 -100%;
  }
}

Eine Zeitfunktion in einzelnen Keyframes – der Fall beschleunigt, das Steigen nach dem Aufprall bremst ab:

.ball {
  animation: jump 1s both;
}
@keyframes jump {
  0% {
    translate: 0 -60px;
    animation-timing-function: ease-in;
  }
  60% {
    translate: 0 0;
    animation-timing-function: ease-out;
  }
  80% {
    translate: 0 -15px;
    animation-timing-function: ease-in;
  }
  100% { translate: 0 0; }
}

Worauf Sie achten sollten

• Deklarationen mit !important werden in @keyframes ignoriert – der Browser verwirft sie, die übrigen Deklarationen des Keyframes gelten weiter.
• Zwei @keyframes-Regeln mit demselben Namen werden nicht zusammengeführt: Es gilt die ganze letzte. Das lässt sich nutzen – eine später geschriebene Regel in @media ersetzt die gleichnamige Animation, etwa für prefers-reduced-motion.
• Eigenschaften, die sich nicht weich ändern können (zum Beispiel justify-content), wechseln in einer Animation in einem Schritt in der Mitte des Abschnitts.
• Beim Namen zählt die Groß- und Kleinschreibung und er darf nicht none sein.
• Ohne Keyframe from oder to werden die fehlenden Werte aus den gewöhnlichen Stilen des Elements genommen – die Animation setzt so weich an dem Zustand an, in dem das Element gerade ist.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit September 2015, gilt als weithin verfügbar seit März 2018. Ab Version: Chrome 43, Firefox 16, Safari 9. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
animation
cubic-bezier() und steps()
transition
prefers-reduced-motion