@keyframes

Die @keyframes CSS at-rule 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 Animationssequenz als Transitions.

Syntax

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

Werte

<custom-ident>

Ein Name, der die Keyframe-Liste identifiziert. Dieser muss der Identifier-Produktion in der CSS-Syntax entsprechen.

from

Ein Start-Offset von 0%.

to

Ein End-Offset von 100%.

<percentage>

Ein Prozentwert der Zeit innerhalb der Animationssequenz, bei dem das angegebene Keyframe auftreten soll.

<timeline-range-name> <percentage>

Ein Prozentwert der Zeit innerhalb des angegebenen animation-range, bei dem das angegebene Keyframe auftreten soll. Weitere Informationen zu den Arten von Animationen, die benannte Zeitachsenbereiche 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 animation-name-Eigenschaft verwendet wird, um eine Animation mit ihrer Keyframe-Deklaration abzugleichen. Jede @keyframes-Regel enthält eine Stil-Liste von Keyframe-Selektoren, die Prozentsätze entlang der Animation angeben, wenn das Keyframe auftritt, und einen Block, der die Stile für dieses Keyframe enthält.

Sie können die Keyframe-Prozentsätze in beliebiger Reihenfolge auflisten; sie werden in der Reihenfolge behandelt, in der sie auftreten sollen.

JavaScript kann auf die @keyframes at-rule mit dem CSS-Objektmodell-Interface CSSKeyframesRule zugreifen.

Gültige Keyframe-Listen

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

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

Auflösen von Duplikaten

Wenn mehrere Keyframe-Sätze für einen gegebenen Namen existieren, wird der letzte, den der Parser erkannt hat, verwendet. @keyframes-Regeln kaskadieren nicht, sodass Animationen nie Keyframes aus mehr als einem Regelset ableiten.

Wenn ein gegebener Animationszeit-Offset dupliziert wird, werden alle Keyframes in der @keyframes-Regel für diesen Prozentsatz für diesen Frame verwendet. Es gibt eine Kaskadierung innerhalb einer @keyframes-Regel, wenn mehrere Keyframes die gleichen Prozentsatzwerte angeben.

Wenn Eigenschaften in einigen Keyframes weggelassen werden

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

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

Hier animiert die top-Eigenschaft mit den 0%, 30% und 100%-Keyframes, und left animiert mit den 0%, 68%, 72% und 100%-Keyframes.

Wenn ein Keyframe mehrfach definiert wird

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

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

In diesem Beispiel werden im 50%-Keyframe 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.

@keyframes important1 {
 0% {
 margin-top: 50px;
 }
 50% {
 margin-top: 150px !important; /* ignored */
 }
 100% {
 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

Für Beispiele siehe Verwendung von CSS-Animationen und Elemente beim Scrollen mit Scroll-gesteuerten Animationen animieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• animation-range
• CSS scroll-gesteuerte Animationen
• Verwendung von CSS-Animationen
• CSS-Animationsmodul
• Elemente beim Scrollen mit Scroll-gesteuerten Animationen animieren
• AnimationEvent