CSS animation-Eigenschaft

Die CSS-Eigenschaft animation ermöglicht es Ihnen, Elemente zu animieren – also einen oder mehrere CSS-Werte schrittweise über die Zeit zu verändern – ganz ohne JavaScript. Sie funktioniert bei Eigenschaften, deren Werte interpoliert werden können, wie etwa Layout-Abmessungen (border, height, width), Position (left, top), font size, color und opacity.

Diese Seite behandelt die animation-Kurzschreibweise, alle acht einzelnen animation-*-Langform-Eigenschaften, die @keyframes at-rule, die sie steuert, das gleichzeitige Ausführen mehrerer Animationen sowie die Berücksichtigung von Nutzern, die reduzierte Bewegung bevorzugen. animation ist eine der CSS3-Eigenschaften.

Eine Animation besteht aus zwei Teilen: einer @keyframes-Regel, die beschreibt, wie das Element an bestimmten Punkten der Zeitachse aussieht, und der animation-Eigenschaft (oder ihren Langformen) am Element, die festlegt, wie diese Zeitachse abgespielt werden soll – wie lang, wie oft, in welche Richtung und so weiter.

Ältere Browser benötigen möglicherweise das Präfix -webkit- für erweiterte Unterstützung.

Info

Eigenschaften, die ein Schlüsselwort als Wert verwenden, wie etwa display: none; oder visibility: hidden;, können nicht animiert werden. Eigenschaften mit Werten wie height: auto; können ebenfalls nicht animiert werden.

Die @keyframes at-rule

Um Animationen zu verwenden, müssen Sie zunächst festlegen, was zu bestimmten Zeitpunkten der Animation geschehen soll. Dies wird mit der @keyframes at-rule definiert.

Die @keyframes-Regel besteht aus dem Schlüsselwort „@keyframes", gefolgt vom Animationsnamen, der die Animation identifiziert. Die Animation wird dann auf ein Element angewendet, indem dieser Bezeichner als Wert für die animation-name-Eigenschaft verwendet wird.

In geschweiften Klammern werden Keyframe-Selektoren definiert, die Keyframes (oder Wegpunkte) in der Animationssequenz festlegen, an denen die Stile geändert werden sollen. Der Keyframe-Selektor kann mit einem Prozentwert (%) oder mit den Schlüsselwörtern „from" (entspricht 0 %) und „to" (entspricht 100 %) beginnen. 0 % ist der Startpunkt der Animation, 100 % ist der Endpunkt.

Beispiel einer Animation mit der @keyframe-Regel:

Beispiel der animation-Eigenschaft mit @keyframes

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property.</div>
  </body>
</html>

Probier es selbst »

In diesem Beispiel binden wir die Animation an das <div>-Element. Die Animation dauert 4 Sekunden und ändert die Hintergrundfarbe des <div>-Elements schrittweise von „Grün" nach „Grau".

Animationsbezogene Eigenschaften

animation ist die Kurzschreibweise, um alle einzelnen Animationseigenschaften in einer einzigen Deklaration zu setzen. Die Standard-Langformen sind nachfolgend zusammengefasst.

Eigenschaft	Legt fest	Häufige Werte
`animation-name`	Die abzuspielende @keyframes-Regel	ein Name, `none`
`animation-duration`	Wie lange ein Zyklus dauert	`2s`, `500ms` (Standard `0s` – keine Animation)
`animation-timing-function`	Die Geschwindigkeitskurve innerhalb jedes Zyklus	`ease`, `linear`, `ease-in-out`, `cubic-bezier(…)`
`animation-delay`	Wartezeit vor dem Start	`1s`, `-2s` (negativ startet mitten in der Animation)
`animation-iteration-count`	Wie oft die Animation abgespielt wird	eine Zahl, `infinite`
`animation-direction`	Vorwärts, rückwärts oder hin und her	`normal`, `reverse`, `alternate`
`animation-fill-mode`	Stile vor/nach der Ausführung	`none`, `forwards`, `backwards`, `both`
`animation-play-state`	Ob sie läuft oder pausiert	`running`, `paused`

Sehen wir uns nun die animationsbezogenen Eigenschaften in der Praxis an.

Beispiel einer Animation mit einigen animationsbezogenen Eigenschaften:

@keyframes pulse {
  /* declare animation actions here */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

/*
  The same can be declared using the animation shorthand property 
*/

.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

Die Reihenfolge der Werte in der Kurzschreibweise ist weitgehend flexibel, mit zwei Regeln, die man sich merken sollte: Der Name muss vorhanden sein, und wenn sowohl eine Dauer als auch eine Verzögerung angegeben sind, ist der erste Zeitwert die Dauer und der zweite die Verzögerung. Jeder ausgelassene Wert fällt auf seinen Standardwert zurück (lässt man beispielsweise animation-iteration-count weg, wird die Animation einmal abgespielt).

Animation-name

Diese Eigenschaft definiert den Namen der @keyframes-Regel, die angewendet werden soll.

Syntax der animation-name-Eigenschaft

animation-name: keyframe-name | none | initial | inherit

Beispiel der animation-name-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>

Probier es selbst »

Animation-duration

Diese Eigenschaft definiert die Zeitdauer (in Sekunden oder Millisekunden), die eine Animation benötigt, um einen Zyklus zu vollenden. Wird diese Eigenschaft nicht angegeben, findet keine Animation statt.

Syntax der animation-duration-Eigenschaft

animation-duration: time | initial | inherit

Beispiel der animation-duration-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Probier es selbst »

Animation-timing-function

Diese Eigenschaft legt fest, wie eine Animation innerhalb der Dauer jedes Zyklus fortschreitet – nicht über die gesamte Animation hinweg.

Syntax der animation-timing-function-Eigenschaft

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Beispiel der animation-timing-function-Eigenschaft mit dem Wert „ease":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Animation-delay

Diese Eigenschaft legt die Zeit (in Sekunden oder Millisekunden) zwischen dem Laden des Elements und dem Start der Animation fest.

Syntax der animation-delay-Eigenschaft

animation-delay: time | initial | inherit

Beispiel der animation-delay-Eigenschaft:

Beispiel der CSS-animation-delay-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Animation-direction

Diese Eigenschaft legt fest, ob die Animation bei alternierenden Zyklen in umgekehrter Reihenfolge abgespielt werden soll oder nicht.

Syntax der animation-direction-Eigenschaft

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Folgende Werte können angewendet werden:

normal — (Standard) Animation wird vorwärts abgespielt (Keyframes 0 % – 100 %)
reverse — Animation wird rückwärts abgespielt (Keyframes 100 % – 0 %)
alternate — die Animation wird vorwärts abgespielt, dann umgekehrt und wiederholt.
alternate-reverse — die Animation wird rückwärts und dann vorwärts abgespielt.

Beispiel der animation-direction-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Animation-iteration-count

Legt fest, wie oft ein Animationszyklus abgespielt werden soll, bevor er anhält. Der Standardwert ist eins, es kann jedoch jede positive ganze Zahl gesetzt werden. Mit dem Schlüsselwort infinite wird die Animation endlos abgespielt.

Warnung

Eine null oder negative ganze Zahl führt dazu, dass die Animation niemals abgespielt wird.

Syntax der animation-iteration-count-Eigenschaft

animation-iteration-count: number | infinite | initial | inherit

Beispiel der animation-iteration-count-Eigenschaft:

Beispiel der CSS-animation-iteration-count-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          left: 0;
        }
        50% {
          left: 50%;
        }
        100% {
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Probier es selbst »

Animation-fill-mode

Diese Eigenschaft legt einen Stil für das Element fest, der vor oder nach der Ausführung der Animation angewendet wird.

Syntax der animation-fill-mode-Eigenschaft

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Folgende Werte sind möglich:

forwards – legt fest, dass das Element die Stilwerte des letzten Keyframes beibehalten soll (abhängig von den Eigenschaften animation-iteration-count und animation-direction).
backwards – legt fest, dass das Element die Stilwerte des ersten Keyframes annehmen soll (abhängig von animation-direction) und diese während der animation-delay-Periode beibehält.
both – legt fest, dass die Animation sowohl die Regeln für forwards als auch für backwards befolgen soll.
none – (Standard) legt fest, dass vor oder nach der Ausführung der Animation kein Stil auf das Element angewendet wird.

Beispiel der animation-fill-mode-Eigenschaft mit dem Wert „forwards":

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Animation-play-state

Diese Eigenschaft gibt an, ob die Animation abgespielt wird oder pausiert.

Syntax der animation-play-state-Eigenschaft

animation-play-state: paused | running | initial | inherit

Der Standardwert ist running.

Beispiel der animation-play-state-Eigenschaft mit dem Wert „running":

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Mehrere Animationen

Es ist möglich, mehrere Animationen auf einem Selektor zu deklarieren – die Werte werden einfach durch Kommas getrennt.

Beispiel mehrerer Animationen auf einem Selektor:

Beispiel der animation-Eigenschaft mit mehreren Animationen

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Probier es selbst »

Reduzierte Bewegung berücksichtigen

Starke oder dauerhafte Bewegungen können bei manchen Nutzern Übelkeit, Schwindel oder Migräne auslösen. Betriebssysteme bieten eine Einstellung „Bewegung reduzieren" an, die Sie mit der Media Query prefers-reduced-motion berücksichtigen können – indem Sie Animationen für diese Nutzer deaktivieren (oder abschwächen) und für alle anderen beibehalten.

.element {
  animation: pulse 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

Es empfiehlt sich, alle nicht wesentlichen Bewegungen in diese Media Query einzubetten, damit Ihre Animationen barrierefrei bleiben.

Häufige Fallstricke

Kein animation-duration bedeutet keine Animation. Die Standarddauer ist 0s, sodass die Keyframes keine Chance haben, abgespielt zu werden.
Schlüsselwort- und auto-Werte können nicht animiert werden. Wie oben erwähnt, können Eigenschaften wie display, visibility und height: auto nicht interpoliert werden. Animieren Sie stattdessen opacity und transform – sie bieten außerdem die beste Performance.
forwards bleibt nur bei endlicher Iterationsanzahl erhalten. animation-fill-mode: forwards hält den letzten Keyframe nach dem Ende der Animation fest; bei infinite endet sie nie, sodass es nichts zu halten gibt.
Die Reihenfolge der Zeitwerte in der Kurzschreibweise ist entscheidend. Der erste <time>-Wert ist die Dauer, der zweite ist die Verzögerung.

Übung

Welche der folgenden Aussagen über CSS animation sind zutreffend?

CSS erlaubt die Animation von HTML-Elementen ohne JavaScript.Die animation-Eigenschaft in CSS ist eine Kurzschreibweise für mehrere Animationseigenschaften wie: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.In CSS animation wird die @keyframes-Regel verwendet, um die Animation zu definieren.Der Animationseffekt tritt nur auf, wenn kein Animationsname angegeben ist.Die CSS-Animationseigenschaften müssen direkt auf die HTML-Elemente angewendet werden.

Die @keyframes at-rule

Beispiel einer Animation mit der @keyframe-Regel:

Animationsbezogene Eigenschaften

Beispiel einer Animation mit einigen animationsbezogenen Eigenschaften:

Animation-name

Beispiel der animation-name-Eigenschaft:

Animation-duration

Beispiel der animation-duration-Eigenschaft:

Animation-timing-function

Beispiel der animation-timing-function-Eigenschaft mit dem Wert „ease":

Animation-delay

Beispiel der animation-delay-Eigenschaft:

Animation-direction

Beispiel der animation-direction-Eigenschaft:

Animation-iteration-count

Beispiel der animation-iteration-count-Eigenschaft:

Animation-fill-mode

Beispiel der animation-fill-mode-Eigenschaft mit dem Wert „forwards":

Animation-play-state

Beispiel der animation-play-state-Eigenschaft mit dem Wert „running":

Mehrere Animationen

Beispiel mehrerer Animationen auf einem Selektor:

Reduzierte Bewegung berücksichtigen

Häufige Fallstricke

Verwandte Eigenschaften

Übung