W3docs
de
Anmelden

CSS @keyframes-Regel

Die @keyframes-Regel definiert den Animationscode und ermöglicht schrittweise Übergänge zwischen verschiedenen CSS-Stilen.

Die @keyframes-At-Regel ist die Grundlage für Keyframe-Animationen, mit denen viele CSS-Eigenschaften animiert (d. h. schrittweise von einem Stil in einen anderen überführt) werden können. Diese Regel legt fest, was zu bestimmten Zeitpunkten während der Animation passieren soll, indem Stile für Keyframes (oder Wegpunkte) entlang der Animationssequenz definiert werden.

Die @keyframes-Regel ist ein wesentlicher Bestandteil der CSS-Animations-Spezifikation.

Auf die @keyframes-Regel und ihren Bezeichner folgen Regelmengen (d. h. Stilregeln mit Selektoren und Deklarationsblöcken, wie im normalen CSS-Code), die durch geschweifte Klammern begrenzt werden.

Keyframes in der Animationssequenz

Innerhalb der geschweiften Klammern legen Keyframe-Selektoren fest, wann sich die Stile während der Animationssequenz ändern sollen. Der Satz von CSS-Stilen kann im Verlauf der Animation mehrfach aktualisiert werden.

Keyframe-Selektor

Der Keyframe-Deklarationsblock enthält CSS-Eigenschaften und ihre Werte. Ein Keyframe-Selektor kann einen Prozentwert (%) oder die Schlüsselwörter from (entspricht 0 %) und to (entspricht 100 %) verwenden. 0 % markiert den Anfang der Animation und 100 % das Ende.

Man ist nicht auf zwei Keyframes beschränkt. Durch das Hinzufügen von Zwischenselektoren wie 25% oder 75% kann die Animation an beliebig vielen Punkten gesteuert werden:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

Selektoren, die dieselben Stile teilen, können auch gruppiert und durch Kommas getrennt werden: 0%, 100% { opacity: 1; }.

Wie der Browser die Lücken füllt

Es müssen nur die Stile an den Keyframe-Wegpunkten deklariert werden — der Browser interpoliert jeden dazwischenliegenden Frame. Wenn background-color bei 0% grün und bei 50% blau animiert wird, verlaufen die Farben über dieses Intervall hinweg fließend ineinander; die Zwischenwerte müssen nicht manuell angegeben werden.

Einige Regeln steuern dieses Zwischen-Tweening:

  • Nur animierbare Eigenschaften interpolieren. Numerische Werte und Farbwerte (wie width, opacity, transform und color) werden fließend animiert. Eigenschaften wie display wechseln sofort zwischen den Keyframes, anstatt zu tweenen.
  • Das Tempo wird separat gesteuert. Die Form der Interpolationskurve (linear, ease, ease-in-out usw.) ergibt sich aus animation-timing-function, nicht aus @keyframes.
  • Fehlende from/to-Werte werden abgeleitet. Wenn der 0%- oder 100%-Keyframe weggelassen wird, verwendet der Browser den vorhandenen berechneten Wert des Elements für diese Eigenschaft als fehlenden Endpunkt.

Vendor-Präfixe

Die @keyframes-Regel wird von allen modernen Browsern vollständig unterstützt, ohne dass Vendor-Präfixe erforderlich sind. Legacy-Präfixe (wie -webkit- oder -moz-) werden nicht mehr benötigt.

Syntax

Syntax der CSS-@keyframes-At-Regel

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes als Schlüsselwort verwenden

Die @keyframes-Regel besteht aus dem Schlüsselwort @keyframes, gefolgt von einem Bezeichner (vom Entwickler gewählt), der die Animation definiert. Um die Animation an ein Element zu binden, wird dieser Bezeichner als Wert für die Eigenschaft animation-name verwendet.

So sieht das aus:

Animation definieren und auf ein Element anwenden

/* define the animation */
@keyframes your-animation-name {
  /* style rules */
}

/* apply it to an element */
.element {
  animation-name: your-animation-name;
  /* OR using the animation shorthand property */
  animation: your-animation-name 1s …;
}

Beispiel der @keyframes-Regel mit der Eigenschaft background-color:

Beispiel der CSS-@keyframes-At-Regel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 50px;
        animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #cccccc;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>
Probier es selbst »

In diesem Beispiel animieren wir die Eigenschaft background-color. Zuerst legen wir einen Bezeichner für die Animation fest: backgrounds. Dann definieren wir die Keyframe-Selektoren (0%, 50% und 100%) und geben Werte für die Eigenschaft an: Grün, Blau und Grau. Das bedeutet: Am Startpunkt (0%) ist die Hintergrundfarbe Hellgrün, bis sie den nächsten Keyframe (50%) erreicht. In der Mitte der Animationssequenz wechselt der Hintergrund zu Hellblau und am Endpunkt (100%) zu Grau.

Beispiel der @keyframes-Regel:

Beispiel der CSS-@keyframes-At-Regel mit dem Wert infinite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        height: 100px;
        background: red;
        border-radius: 50%;
        position: relative;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes rule example</h2>
    <div></div>
  </body>
</html>
Probier es selbst »

Beispiel der Verwendung der @keyframes-Regel für ein fallendes Bild:

Beispiel der CSS-@keyframes-At-Regel mit der transform-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        transform-origin: left center;
        animation: fall 5s infinite;
      }
      @keyframes fall {
        from {
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50" />
    </div>
  </body>
</html>
Probier es selbst »

Syntaxkomponenten

KomponenteBeschreibung
identifierGibt den Namen der Animation an. Erforderlich.
keyframe-selectorGibt den Prozentwert der Animationsdauer an. Akzeptiert 0% bis 100%, from (0 %) oder to (100 %). Erforderlich.
declaration-blockEnthält die CSS-Eigenschaften und Werte, die auf jeden Keyframe angewendet werden. Erforderlich.

Häufige Fallstricke

  • @keyframes allein bewirkt nichts. Die Regel definiert die Animation nur. Nichts bewegt sich, bis der Name über die Eigenschaft animation-name (oder die Kurzschreibweise animation) eines Elements referenziert wird und eine von null verschiedene animation-duration angegeben ist.
  • Namen sind Groß-/Kleinschreibungs-sensitiv und dürfen kein CSS-weites Schlüsselwort sein. Reservierte Wörter wie none, initial, inherit und unset sollten als Animationsnamen vermieden werden.
  • Doppelte Keyframe-Regeln kaskadieren. Wenn zwei @keyframes-Blöcke denselben Namen haben, gewinnt der zuletzt definierte vollständig — sie werden nicht zusammengeführt.
  • !important innerhalb eines Keyframes wird ignoriert. Die Animations-Spezifikation ignoriert !important-Deklarationen innerhalb von Keyframes ausdrücklich.

Verwandte Themen

Übung

Übung
Was ist korrekt in Bezug auf CSS-Keyframes?
Was ist korrekt in Bezug auf CSS-Keyframes?
Was this page helpful?