CSS-Eigenschaft @keyframes

❮ Vorige Nächste ❯

Die at-Regel @keyframes ist die Grundlage für Keyframe-Animationen, mit denen viele CSS-Eigenschaften animiert werden (allmählich von einem Stil zum anderen wechseln). Diese Regel bestimmt die Zeitpunkten, während der die Animation passieren soll, indem Stile für Keyframes (oder Wegpunkte) entlang der Animationssequenz definiert werden.

Auf die Regel @keyframes und ihren Identifikator folgen Regelsätze (d. h. Style Rules mit Selektoren und Deklarationsblöcken, wie im normalen CSS-Code), die durch geschweifte Klammern begrenzt sind.

In geschweiften Klammern werden Keyframe-Selektoren platziert, die Keyframes in der Animationssequenz definieren, wann die Styles geändert werden sollen. Während der Animationssequenz kann der Satz der CSS-Stile mehrfach geändert werden.

Der Keyframe-Deklarationsblock enthält CSS-Eigenschaften und deren Werte. Der Keyframe-Selektor kann mit einem Prozentsatz (%) oder mit den Schlüsselwörtern“from” (entspricht 0%) und “to” (entspricht 100%) anfangen. 0% ist ein Startpunkt der Animation, 100% ist der Endpunkt.

Die Regel @keyframes wird von allen gängigen Browsern vollständig unterstützt. Für einige Präfixe werden jedoch Präfixe verwendet:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0

Syntax

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

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

So sieht es aus:

/* 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

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .element {
      padding: 50px;
      animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
      0% { background-color: #8ebf42}
      50% { background-color: #1c87c9; }
      100% { background-color: #ccc; }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes Beispiel</h2>
    <div class="element">Der Hintergrund dieses Textes ist animiert.</div>
  </body>
</html>

Versuch es selber!

In diesem Beispiel animieren wir die Eigenschaft Hintergrundfarbe. Zuerst stellen wir einen Identifikator für die Animation - Bouncing ein. Dann stellen wir Keyframe-Selektoren - 0%, 50% und 100% ein und definieren die Werte für die Eigenschaft - grün, blau und grau. Das bedeutet, dass die Hintergrundfarbe am Startpunkt (0%) hellgrün ist, bis sie einen anderen Keyframe (50%) erreicht, in der Mitte der Animationsfolge wird der Hintergrund hellblau (von 50%-100%) und am Endpunkt (100%) grau.

Ein anderes Beispiel @keyframes:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      width: 10px;
      height: 100px;
      background: red;
      border-radius: 50%;
      position: relative;
      -webkit-animation: element 4s infinite; 
      animation: element 4s infinite;
      }
      @-webkit-keyframes element {
      0%   {top: 0px; background: #1c87c9; width: 100px;}
      100% {top: 200px; background: #8ebf42; width: 150px;}
      }
      @keyframes element {
      0%   {top: 0px; background: #1c87c9; width: 100px;}
      100% {top: 200px; background: #8ebf42; width: 150px;}
      }
    </style>
  </head>
  <body>
    <h2>@keyframes Beispiel</h2>
    <div></div>
  </body>
</html>

Versuch es selber!

Ein Beispiel, wo das Bild mit @keyframes: fällt

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html, body {
      height: 90%;
      } 
      .container {
      margin: 30px auto;
      min-width: 320px;
      max-width: 600px;
      height: 90%;
      overflow: hidden;
      }
      img {
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: fall 5s infinite;
      animation: fall 5s infinite;
      }
      @-webkit-keyframes fall{
      from {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
      opacity: 1;
      }
      to {
      -webkit-transform: rotate(90deg) translateX(200px);
      transform: rotate(90deg) translateX(200px);
      opacity: 0.1;
      }
      }
      @keyframes fall{
      from {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
      opacity: 1;
      }
      to {
      -webkit-transform: rotate(90deg) translateX(200px);
      transform: rotate(90deg) translateX(200px);
      opacity: 0.1;
      }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes Beispiel</h2>
    <div class="container">
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50"/>
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
animationname	Gibt den Namen der Animation an. Dieser Wert ist erforderlich.
keyframes-selector	Gibt den Prozentsatz der Animationsdauer an. Werte sind: 0-100% von (entspricht 0%) bis (entspricht 100%) Dieser Wert ist erforderlich.
css-styles	CSS-Style Eigenschaften. Dieser Wert ist erforderlich.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.