@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-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 Übergänge.
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 Identifikatorproduktion in der CSS-Syntax entsprechen.
from-
Ein Anfangsversatz von
0%. to-
Ein Endversatz von
100%. <percentage>-
Ein Prozentsatz der Zeit durch die Animationssequenz, zu dem das angegebene Keyframe auftreten soll.
<timeline-range-name><percentage>-
Ein Prozentsatz der Zeit durch den angegebenen
animation-range, zu dem das angegebene Keyframe auftreten soll. Weitere Informationen zu den Arten von Animationen, die benannte Zeitstrahlbereiche verwenden, finden Sie in CSS scroll-gesteuerte Animationen.
Beschreibung
Um Keyframes zu verwenden, erstellen Sie eine @keyframes-Regel mit einem Namen, der dann von der 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, wann 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 verarbeitet, in der sie auftreten sollen.
JavaScript kann auf die @keyframes at-rule mit dem CSS-Objektmodell-Schnittstelle CSSKeyframesRule zugreifen.
Gültige Keyframe-Listen
Wenn eine Keyframe-Regel die Anfangs- oder Endzustände der Animation (also 0%/from und 100%/to) nicht angibt, verwenden Browser die bestehenden Stile des Elements für die Anfangs-/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 dennoch animiert.
Auflösen von Duplikaten
Wenn mehrere Keyframe-Sätze für einen gegebenen Namen existieren, wird der letzte, der vom Parser gefunden wird, verwendet. @keyframes-Regeln kaskadieren nicht, sodass Animationen niemals Keyframes von mehr als einem Regelsatz ableiten.
Wenn ein gegebener Animationszeit-Versatz 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 dieselben Prozentsatzwerte angeben.
Wenn Eigenschaften in einigen Keyframes ausgelassen werden
Eigenschaften, die nicht in jedem Keyframe angegeben sind, werden, wenn möglich, interpoliert — Eigenschaften, die nicht interpoliert werden können, werden von der Animation ausgeschlossen. 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 Keyframes 0%, 30% und 100%, und left animiert mit den Keyframes 0%, 68%, 72% und 100%.
Wenn ein Keyframe mehrfach definiert ist
Wenn ein Keyframe mehrfach definiert ist, aber nicht alle betroffenen Eigenschaften in jedem Keyframe vorhanden 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 sind bei dem 50%-Keyframe die verwendeten Werte top: 10px und left: 20px.
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
Siehe Verwendung von CSS-Animationen und scroll-gesteuerte Animationen für Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # keyframes |