CSS-Animations-Eigenschaft

Die Eigenschaft animation wird verwendet, um CSS-Eigenschaften mit kontinuierlichen Werten zu animieren (also schrittweise von einem Stil zu einem anderen zu ändern): Layout-Eigenschaften (border, height, width usw.), Eigenschaften zur Positionsbestimmung (left, top), Schriftgrößen, Farben und Deckkraft.

Die Eigenschaft animation ist eine der CSS3-Eigenschaften.

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

INFO

Eigenschaften, die ein Schlüsselwort als Wert verwenden, wie 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-Regel

Um Animationen zu verwenden, müssen Sie zuerst festlegen, was zu bestimmten Zeitpunkten während der Animation geschehen soll. Dies wird mit der @keyframes-At-Regel definiert.

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

In geschweifte Klammern setzen wir Keyframe-Selektoren, die Keyframes (oder Wegpunkte) in der Animationssequenz definieren, an denen die Stile geändert werden sollen. Der Keyframe-Selektor kann mit einem Prozentsatz (%) oder mit den Schlüsselwörtern „from“ (gleich 0 %) und „to“ (gleich 100 %) beginnen. 0 % ist der Startpunkt der Animation, 100 % ist der Endpunkt.

Beispiel für Animation mit der @keyframe-Regel:

Beispiel für die Eigenschaft animation mit @keyframes

html

<!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>

Try it Yourself »

In diesem Beispiel binden wir die Animation an das Element <div>. Die Animation dauert 4 Sekunden und verändert die Hintergrundfarbe des <div>-Elements schrittweise von „grün“ zu „grau“.

Animationsbezogene Eigenschaften

animation ist die Kurzschreibweise, mit der alle Animations-Eigenschaften in einer einzigen Deklaration festgelegt werden. Unten listen wir alle standardmäßigen animationsbezogenen Eigenschaften auf.

Sehen wir uns nun animationsbezogene Eigenschaften in Aktion an.

Beispiel für Animation mit einigen animationsbezogenen Eigenschaften:

Beispiel für Animation mit einigen animationsbezogenen Eigenschaften:

css

@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;
}

Animation-name

Diese Eigenschaft definiert den Namen der @keyframes-Regel, die Sie anwenden möchten.

Syntax der Eigenschaft animation-name

css

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

Beispiel für die Eigenschaft animation-name:

Beispiel für die Eigenschaft animation-name

html

<!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>

Try it Yourself »

Animation-duration

Sie definiert die Dauer (in Sekunden oder Millisekunden), die eine Animation für einen vollständigen Zyklus benötigt. Wenn diese Eigenschaft nicht angegeben wird, findet keine Animation statt.

Syntax der Eigenschaft animation-duration

css

animation-duration: time | initial | inherit

Beispiel für die Eigenschaft animation-duration:

Beispiel für die Eigenschaft animation-duration

html

<!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>

Try it Yourself »

Animation-timing-function

Diese Eigenschaft definiert, wie eine Animation über die Dauer jedes Zyklus fortschreitet — nicht über die gesamte Animation hinweg.

Syntax der Eigenschaft animation-timing-function

css

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

Beispiel für die Eigenschaft animation-timing-function mit dem Wert „ease“:

Beispiel für die Eigenschaft animation-timing-function mit dem Wert „ease“:

html

<!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>

Try it Yourself »

Animation-delay

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

Syntax der Eigenschaft animation-delay

css

animation-delay: time | initial | inherit

Beispiel für die Eigenschaft animation-delay:

Beispiel für die CSS-Eigenschaft animation-delay

html

<!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>

Try it Yourself »

Animation-direction

Sie definiert, ob die Animation in alternierenden Zyklen rückwärts abgespielt werden soll oder nicht.

Syntax der Eigenschaft animation-direction

css

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

Die folgenden Werte können verwendet werden:

normal — (Standard) die Animation wird vorwärts abgespielt (Keyframes 0 % - 100 %)
reverse — die 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 für die Eigenschaft animation-direction:

Beispiel für die Eigenschaft animation-direction:

html

<!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>

Try it Yourself »

Animation-iteration-count

Legt fest, wie oft ein Animationszyklus abgespielt werden soll, bevor er stoppt. Der Standardwert ist eins, aber jeder positive Ganzzahlwert kann gesetzt werden. Wenn Sie das Schlüsselwort infinite setzen, wird die Animation endlos abgespielt.

WARNING

Eine Null oder eine negative Ganzzahl spielt die Animation niemals ab.

Syntax der Eigenschaft animation-iteration-count

css

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

Beispiel für die Eigenschaft animation-iteration-count:

Beispiel für die CSS-Eigenschaft animation-iteration-count:

html

<!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>

Try it Yourself »

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 Eigenschaft animation-fill-mode

css

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

Sie kann die folgenden Werte annehmen:

forwards - gibt an, dass das Element die vom letzten Keyframe festgelegten Stilwerte beibehalten soll (abhängig von den Eigenschaften animation-iteration-count und animation-direction).
backwards - gibt an, dass das Element die vom ersten Keyframe festgelegten Stilwerte erhalten soll (abhängig von animation-direction) und sie während des animation-delay-Zeitraums beibehalten soll.
both - gibt an, dass die Animation sowohl den Regeln für forwards als auch für backwards folgen soll.
none - (Standard) gibt an, dass vor oder nach der Ausführung der Animation kein Stil auf das Element angewendet wird

Beispiel für die Eigenschaft animation-fill-mode mit dem Wert „forwards“:

Beispiel für die Eigenschaft animation-fill-mode mit dem Wert „forwards“:

html

<!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>

Try it Yourself »

Animation-play-state

Diese Eigenschaft legt fest, ob die Animation abgespielt oder pausiert wird.

Syntax der Eigenschaft animation-play-state

css

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

Der Standardwert ist running.

Beispiel für die Eigenschaft animation-play-state mit dem Wert „running“:

Beispiel für die Eigenschaft animation-play-state mit dem Wert „running“:

html

<!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>

Try it Yourself »

Mehrere Animationen

Es ist möglich, mehrere Animationen für einen Selektor zu deklarieren; Sie müssen die Werte nur durch Kommas trennen.

Beispiel für mehrere Animationen auf einem Selektor:

Beispiel für die Eigenschaft Animation mit mehreren Animationen

html

<!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>

Try it Yourself »

Practice

Welche der folgenden Aussagen über CSS-Animationen sind wahr?

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

CSS-Animations-Eigenschaft ​

Die @keyframes-At-Regel ​

Beispiel für Animation mit der @keyframe-Regel: ​

Animationsbezogene Eigenschaften ​

Beispiel für Animation mit einigen animationsbezogenen Eigenschaften: ​

Animation-name ​

Beispiel für die Eigenschaft animation-name: ​

Animation-duration ​

Beispiel für die Eigenschaft animation-duration: ​

Animation-timing-function ​

Beispiel für die Eigenschaft animation-timing-function mit dem Wert „ease“: ​

Animation-delay ​

Beispiel für die Eigenschaft animation-delay: ​

Animation-direction ​

Beispiel für die Eigenschaft animation-direction: ​

Animation-iteration-count ​

Beispiel für die Eigenschaft animation-iteration-count: ​

Animation-fill-mode ​

Beispiel für die Eigenschaft animation-fill-mode mit dem Wert „forwards“: ​

Animation-play-state ​

Beispiel für die Eigenschaft animation-play-state mit dem Wert „running“: ​

Mehrere Animationen ​

Beispiel für mehrere Animationen auf einem Selektor: ​

Practice ​

CSS-Animations-Eigenschaft

Die @keyframes-At-Regel

Beispiel für Animation mit der @keyframe-Regel:

Animationsbezogene Eigenschaften

Beispiel für Animation mit einigen animationsbezogenen Eigenschaften:

Animation-name

Beispiel für die Eigenschaft animation-name:

Animation-duration

Beispiel für die Eigenschaft animation-duration:

Animation-timing-function

Beispiel für die Eigenschaft animation-timing-function mit dem Wert „ease“:

Animation-delay

Beispiel für die Eigenschaft animation-delay:

Animation-direction

Beispiel für die Eigenschaft animation-direction:

Animation-iteration-count

Beispiel für die Eigenschaft animation-iteration-count:

Animation-fill-mode

Beispiel für die Eigenschaft animation-fill-mode mit dem Wert „forwards“:

Animation-play-state

Beispiel für die Eigenschaft animation-play-state mit dem Wert „running“:

Mehrere Animationen

Beispiel für mehrere Animationen auf einem Selektor:

Practice