CSS-Eigenschaft animation

Die Eigenschaft animation wird verwendet, um die CSS-Eigenschaften mit diskreten Werten zu animieren (schrittweise von einem Stil zum anderen wechseln): Layout-Eigenschaften (border, height, width usw.) Eigenschaften, die die Position definieren (left, top), Schriftgrößen, Farben und Opazität.

Hinweis: Die Eigenschaften, die ein Schlüsselwort als Wert verwenden, wie z. B. display: none;, visibility: hidden; oder height: auto; können nicht animiert werden.

@keyframes at-rule

Um die Animation zu verwenden, müssen Sie zunächst festlegen, was zu bestimmten Zeitpunkten während der Animation passieren soll. Das wird mit dem @keyframes at-rule definiert.

Die Regel @keyframes besteht aus einem Schlüsselwort “@keyframes”, gefolgt von einem Animationsnamen, der 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 geschweiften Klammern platzieren wir Keyframe-Selektoren, die Keyframes (oder Wegpunkte) in der Animationssequenz definieren, wann die Styles geändert werden sollen. Der Keyframe-Selektor kann mit einem Prozentsatz (%) oder mit den Schlüsselwörtern “from” (entspricht 0%) und “to” (entspricht 100%). 0% ist ein Startpunkt der Animation; 100% ist der Endpunkt; 100% iist der Endpunkt.

Beispiel

<!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">Der Hintergrund dieses Textes wird mithilfe der CSS3-Eigenschaft animation animiert. </div>
  </body>
</html>

In diesem Beispiel verbinden wir die Animation mit dem Element <div>. Die Animation dauert 4 Sekunden und ändert schrittweise die Hintergrundfarbe des Elements <div> von "grün" zu "grau".

Animation ist die stenografische Eigenschaft, mit der alle Animationseigenschaften in einer einzigen Deklaration festgelegt werden können. Unten finden Sie alle üblichen Eigenschaften von animation-related.

animation-name

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

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

animation-duration

Es definiert die Zeitspanne (in Sekunden oder Millisekunden), die eine Animation benötigt, um einen Zyklus der Animation abzuschließen.

animation-duration: time | initial | inherit

animation-timing-function

Diese Eigenschaft legt fest, wie die Animation über die Dauer jedes Zyklus verläuft - nicht über die gesamte Animation.

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

Es kann folgende Werte annehmen:

  • ease — (Standard) Die Animation beginnt langsam, wird dann schneller und endet langsam.
  • ease-in — Die Animation hat einen langsamen Start, beschleunigt sich aber am Ende und stoppt abrupt.
  • ease-out — Die Animation hat einen schnellen Start, verlangsamt sich aber am Ende.
  • ease-in-out — Die Animation hat sowohl einen langsamen Start als auch ein langsames Ende.
  • linear — Die Animation hat während der gesamten Animation die gleiche Geschwindigkeit; oft am besten geeignet für Farb- oder Opazitätsänderungen.
  • cubic-bezier (n,n,n,n) - Es definiert Ihre eigenen Werte in der cubic-bezier Funktion. Mögliche Werte sind Zahlenwerte von 0 bis 1.

animation-delay

Diese Eigenschaft legt die Zeit (in Sekunden oder Millisekunden) zwischen dem zu ladenden Element und dem Start der Animation fest.

animation-delay: time | initial | inherit

animation-direction

Es definiert, ob die Animation bei wechselnden Zyklen rückwärts abgespielt werden soll oder nicht. Die Standardeinstellung wird bei jedem Zyklus zurückgesetzt.

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

Die folgenden Werte können verwendet werden:

  • normal — (Standard) - 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 rückwärts und wiederholt.
  • alternate-reverse — die Animation wird rückwärts und vorwärts abgespielt.

animation-iteration-count

Es stellt ein, wie oft ein Animationszyklus vor dem Stoppen abgespielt werden soll. Der Standardwert ist eins, aber es kann jeder positive ganzzahlige Wert eingestellt werden. Wenn Sie das Schlüßelwort infinite einstellen, wird die Animation endlos abgespielt.

Hinweis: Bei einer Null oder einer negativen Ganzzahl wird die Animation niemals wiedergeben.
animation-iteration-count: number | infinite | initial | inherit

animation-fill-mode

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

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

Es kann die folgenden Werten haben:

  • 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 - gibt an, dass das Element die vom ersten Keyframe gesetzten Style-Werte erhalten soll (hängt von animation-direction) und hält sie es innerhalb der Zeitspanne animation-delay.
  • both - gibt an, dass die Animation den Regeln sowohl vorwärts als auch rückwärts folgen soll.
  • none - (Standard) legt fest, dass keine Styles auf das Element angewendet werden, bevor oder nachdem die Animation ausgeführt wurde.

animation-play-state

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

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

Der Standardwert ist running.

Lassen Sie uns nun die animationsbezogenen Eigenschaften in Aktion sehen.

Beispiel

@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 animation shorthand property 
*/

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

Multiple Animations

Es ist möglich, mehrere Animationen auf einem Selektor zu deklarieren, man muss nur die Werte durch Kommas trennen.

Beispiel

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

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Was sind die Werte, die Sie für die Animation-properties in CSS angeben können?
Finden Sie das nützlich?