@keyframes

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

Die @keyframes CSS-At-Regel steuert die Zwischenschritte in einer CSS-Animationssequenz, indem sie Stile für Keyframes (oder Wegpunkte) entlang der Animationssequenz definiert. Dies bietet mehr Kontrolle über die Zwischenschritte der Animation als Transitionen.

Syntax

css
@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

Werte

<custom-ident>

Ein Name, der die Liste der Keyframes identifiziert. Dieser muss der Identifikatorproduktion in der CSS-Syntax entsprechen.

from

Ein Startversatz von 0%.

to

Ein Endversatz von 100%.

<percentage>

Ein Prozentsatz der animierten Zeit, bei dem das angegebene Keyframe auftreten soll.

<timeline-range-name> <percentage>

Ein Prozentsatz der Zeit des angegebenen animation-range, bei dem das angegebene Keyframe auftreten soll. Weitere Informationen zu den Arten von Animationen, die benannte Zeitbereich verwenden, finden Sie unter CSS scroll-gesteuerte Animationen.

Beschreibung

Um Keyframes zu verwenden, erstellen Sie eine @keyframes-Regel mit einem Namen, der dann durch die Eigenschaft animation-name verwendet wird, um eine Animation mit ihrer Keyframe-Deklaration zu verknüpfen. Jede @keyframes-Regel enthält eine Liste von Keyframe-Selektoren, die Prozentsätze für den Zeitpunkt der Keyframes angeben, sowie einen Block mit den Stilen für dieses Keyframe.

Die Reihenfolge der Keyframe-Prozentangaben kann beliebig sein; sie wird in der Reihenfolge verarbeitet, in der sie auftreten sollen.

JavaScript kann auf die @keyframes-At-Regel mit der CSS-Objektmodell-Schnittstelle CSSKeyframesRule zugreifen.

Gültige Keyframe-Listen

Wenn eine Keyframe-Regel keinen Anfangs- oder Endzustand der Animation spezifiziert (0%/from und 100%/to), verwenden Browser die vorhandenen Stile des Elements für die Anfangs- und Endzustände. Dies kann verwendet werden, um ein Element von seinem Anfangszustand zu animieren und zurück.

Eigenschaften, die in den Keyframe-Regeln nicht animiert werden können, werden ignoriert, aber unterstützte Eigenschaften werden dennoch animiert.

Auflösung von Duplikaten

Falls mehrere Keyframe-Sets für einen bestimmten Namen existieren, wird das letzte, das vom Parser gefunden wird, verwendet. @keyframes-Regeln kaskadieren nicht, daher leiten Animationen niemals Keyframes von mehr als einem Regelsatz ab.

Wenn ein bestimmter Animationszeitpunkt dupliziert ist, werden alle Keyframes in der @keyframes-Regel für diesen Prozentsatz für diesen Frame verwendet. Innerhalb einer @keyframes-Regel gibt es eine Kaskadierung, wenn mehrere Keyframes dieselben Prozentwerte angeben.

Wenn Eigenschaften in einigen Keyframes ausgelassen werden

Eigenschaften, die nicht in jedem Keyframe angegeben sind, werden interpoliert, wenn es möglich ist — Eigenschaften, die nicht interpoliert werden können, werden aus der Animation entfernt. Zum Beispiel:

css
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

In diesem Beispiel wird die Eigenschaft top mithilfe der Keyframes 0%, 30% und 100% animiert, und left wird mithilfe der Keyframes 0%, 68%, 72% und 100% animiert.

Wenn ein Keyframe mehrfach definiert ist

Wenn ein Keyframe mehrfach definiert ist, aber nicht alle betroffenen Eigenschaften in jedem Keyframe enthalten sind, werden alle in diesen Keyframes angegebenen Werte berücksichtigt. Zum Beispiel:

css
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

In diesem Beispiel werden beim Keyframe 50% die Werte top: 10px und left: 20px verwendet.

Kaskadierende Keyframes werden ab Firefox 14 unterstützt.

!important in einem Keyframe

Deklarationen in einem Keyframe, die mit !important qualifiziert sind, werden ignoriert.

css
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important; /* ignored */
  }
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

Formale Syntax

@keyframes = 
@keyframes <keyframes-name> { <qualified-rule-list> }

<keyframes-name> =
<custom-ident> |
<string>

Beispiele

CSS-Animationsbeispiele

Spezifikationen

Specification
CSS Animations Level 1
# keyframes

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@keyframes
Ignore !important declarations
Named timeline range keyframe selectors
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch