@keyframes

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 Startoffset von 0%.

to

Ein Endoffset von 100%.

<percentage>

Ein Prozentsatz der Zeit innerhalb der Animationssequenz, zu dem das spezifizierte Keyframe auftreten soll.

<timeline-range-name> <percentage>

Ein Prozentsatz der Zeit innerhalb des spezifizierten animation-range, zu dem das spezifizierte Keyframe auftreten soll. Siehe CSS scroll-basierte Animationen für weitere Informationen zu den Arten von Animationen, die benannte Zeitachsenbereiche verwenden.

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 spezifizieren, wann das Keyframe auftritt, und einen Block mit den Stilen für dieses Keyframe.

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

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

Gültige Keyframe-Listen

Wenn eine Keyframe-Regel nicht die Start- oder Endzustände der Animation spezifiziert (also 0%/from und 100%/to), verwenden Browser die vorhandenen Stile des Elements für die Start/End-Zustände. Dies kann verwendet werden, um ein Element aus seinem Anfangszustand 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-Sets für einen gegebenen Namen existieren, wird das letzte vom Parser erkannte verwendet. @keyframes-Regeln werden nicht zusammengeführt, daher leiten Animationen niemals Keyframes von mehr als einem Regelset ab.

Wenn ein bestimmter Animationszeit-Offset dupliziert wird, 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 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%;
  }
}

Hierbei wird die top-Eigenschaft unter Verwendung der 0%, 30% und 100% Keyframes animiert, und left unter Verwendung der 0%, 68%, 72% und 100% Keyframes.

Wenn ein Keyframe mehrfach definiert wird

Wenn ein Keyframe mehrfach definiert wird, aber 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 beim 50%-Keyframe die Werte top: 10px und left: 20px verwendet.

Kaskadierende Keyframes werden ab Firefox 14 unterstützt.

!important in einem Keyframe

Erklärungen 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-Animatiosbeispiele

Siehe Verwendung von CSS-Animationen und Elemente mit scrollbasierten Animationen animieren für Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• animation-range
• CSS scroll-basierte Animationen
• Verwendung von CSS-Animationen
• CSS-Animationen Modul
• Elemente mit scrollbasierten Animationen animieren
• AnimationEvent