CSS/@-Regeln/@keyframes

Mit der @keyframes-Regel legen Sie eine Liste von CSS Regeln fest, die einen Animationsablauf beschreiben. Diese Keyframe-Regeln unterscheiden sich von normalen CSS Regeln dadurch, dass sie keine normalen Selektoren, sondern Zeitpunktangaben verwenden.

Jeder dieser Regelsätze enthält die CSS Eigenschaften, die für ein Element zu einem bestimmten Zeitpunkt innerhalb eines Animationsablaufes gelten sollen. Auf diese Weise legen Sie die Wegpunkte im zeitlichem Ablauf der Animation fest, und der Browser übernimmt die Aufgabe, den Übergang zwischen zwei aufeinander folgenden Wegpunkten fließend zu berechnen (zu interpolieren).

Der Name der Keyframes-Liste folgt den Regeln für selbstdefinierte Namen in CSS.

Zum Einsatz kommt eine solche @keyframes Liste mit Hilfe der animation-name-Eigenschaft des animierten Elements.

Syntax

@keyframes 'animation-name' {
  <zeitpunkt> [, <zeitpunkt> ...] {
    eigenschaft:wert;
    ...
  }
    <zeitpunkt> [, <zeitpunkt> ...] {
    eigenschaft:wert;
    ...
  }
  ...
}

Eine @keyframes Liste kann so viele Keyframe-Regeln wie nötig enthalten.

Als Zeitpunkt geben sie einen Prozentwert an, oder die Schlüsselwörter from oder to als Synonyme für 0% und 100%. Dieser Prozentwert bezieht sich auf den Wert der animation-duration-Eigenschaft - wenn ein bestimmter prozentualer Anteil der Animationsdauer vorüber ist, sollen die angegebenen Eigenschaften die aufgeführten Werte haben.

Falls sich ein bestimmter Elementzustand während einer Animation wiederholt, können Sie die relevanten Zeitpunkte durch Komma getrennt auflisten, wie bei normalen CSS Selektoren auch.

Sie müssen für 0% und 100% nicht zwingend einen Keyframe festlegen. Wenn Sie das unterlassen, setzt der Browser an diesen Zeitpunkt den Zustand des Elements, den es ohne Einfluss der Animation hätte.

Beispiel

@keyframes beispiel {

   from { background-color: #000; }
   to { background-color: #fff; }

}

@keyframes beispiel2 {

   0% { background-color: #000; }
   100% { background-color: #fff; }

}

aside {

   width: 10em;
   height: 10em;
   background-color: #000;
   color: white;
   animation-name: beispiel; 
   animation-duration: 1s;

}

Das aside-Element wechselt im Verlauf von einer Sekunde seine Hintergrundfarbe von Schwarz nach Weiß. Da kein animation-fill-mode festgelegt wurde, wird es nach Ablauf der Animationsdauer in den Ausgangszustand zurückversetzt.
Da die Hintergrundfarbe des aside bereits ohne Animation auf Schwarz festgelegt ist, könnte die Angabe des from-Zustandes auch entfallen.

Beachten Sie:

Für ältere Versionen von Safari und Android müssen Sie proprietäre Eigenschaften verwenden.

für Android, Opera und Safari:

• @-webkit-keyframes

Weblinks

• W3C: keyframes
• MDN: @keyframes

Siehe auch

• CSS/Tutorials/Animation/Animation#keyframes