animation

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;

/* two animations */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

Die animation Eigenschaft wird als eine oder mehrere einzelne Animationen, getrennt durch Kommas, angegeben.

Jede einzelne Animation wird wie folgt spezifiziert:

• null, einmal oder zweimal das <time> Wert

• null oder einmal die folgenden Werte:

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• ein optionaler Name für die Animation, der none, ein <custom-ident> oder ein <string> sein kann

Note: animation-timeline, animation-range-start, and animation-range-end sind derzeit nicht in dieser Liste enthalten, da aktuelle Implementierungen nur zurückgesetzt werden. Dies bedeutet, dass das Einschließen von animation einen zuvor erklärten animation-timeline Wert auf auto zurücksetzt und zuvor deklarierte animation-range-start und animation-range-end Werte auf normal, aber diese Eigenschaften können nicht über animation festgelegt werden. Beim Erstellen von CSS scroll-gesteuerten Animationen müssen Sie diese Eigenschaften nach der Deklaration einer animation Kurzform deklarieren, damit sie wirksam wird.

<single-easing-function>

Bestimmt die Art des Übergangs. Der Wert muss einer der in <easing-function> verfügbaren sein.

<single-animation-iteration-count>

Die Anzahl der Wiederholungen, die die Animation abgespielt wird. Der Wert muss einer der in animation-iteration-count verfügbaren sein.

<single-animation-direction>

Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der in animation-direction verfügbaren sein.

<single-animation-fill-mode>

Bestimmt, wie Stile auf das Ziel der Animation vor und nach ihrer Ausführung angewendet werden sollen. Der Wert muss einer der in animation-fill-mode verfügbaren sein.

<single-animation-play-state>

Bestimmt, ob die Animation abgespielt wird oder nicht. Der Wert muss einer der in animation-play-state verfügbaren sein.

Die Reihenfolge der Zeitwerte innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert, der als <time> geparst werden kann, wird der animation-duration zugewiesen, und der zweite wird der animation-delay zugewiesen.

Die Reihenfolge der anderen Werte innerhalb jeder Animationsdefinition ist ebenfalls wichtig, um einen animation-name Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation Kurzform als Wert für eine Animationseigenschaft außer animation-name geparst werden kann, wird der Wert zuerst dieser Eigenschaft zugewiesen und nicht animation-name. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Liste von Werten anzugeben, wenn Sie die animation Kurzform verwenden; dies gilt auch dann, wenn Sie mehrere durch Kommas getrennte Animationen mit der animation Kurzform angeben.

Während ein Animationsname gesetzt werden muss, damit eine Animation angewendet wird, sind alle Werte der animation Kurzform optional und standardmäßig bei dem Anfangswert für jede Langform-animation-Komponente. Der Anfangswert von animation-name ist none, das heißt, wenn in der animation Kurzform kein animation-name Wert deklariert wird, gibt es keine Animation, die auf eine der Eigenschaften angewendet werden kann.

Wenn der animation-duration Wert in der animation Kurzform-Eigenschaft weggelassen wird, beträgt der Standardwert für diese Eigenschaft 0s. In diesem Fall wird die Animation immer noch ablaufen (die animationStart und animationEnd Ereignisse werden ausgelöst), aber keine Animation wird sichtbar sein.

Im Fall des animation-fill-mode forwards Werts verhalten sich animierte Eigenschaften so, als ob sie in einen festgelegten will-change Eigenschaftswert eingeschlossen wären. Wenn während der Animation ein neuer Stacking-Kontext erstellt wird, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation beendet ist.

Blinkende und flackernde Animationen können problematisch für Personen mit kognitiven Bedenken, wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS), sein. Darüber hinaus können bestimmte Arten von Bewegungen Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

Erwägen Sie, eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitzustellen, sowie die Verwendung der Reduced Motion Media Query, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationen angegeben haben.

• Gestaltung sicherer Web-Animation für Bewegungsempfindlichkeit · Ein A List Apart Artikel
• Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
• Responsive Design für Motion | WebKit
• MDN Verständnis WCAG, Leitfaden 2.2 Erklärungen
• Verstehen des Erfolgskriteriums 2.2.2 | W3C Verstehen WCAG 2.0

animation = 
  <single-animation>#  

<single-animation> = 
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

Hier animieren wir eine gelbe Sonne über einem hellblauen Himmel. Die Sonne steigt in die Mitte des Viewports und fällt dann aus dem Sichtfeld.

<div class="sun"></div>

:root {
  overflow: hidden; /* hides any part of the sun below the horizon */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centers the sun in the background */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

Aufbauend auf der Sonnenanimation im vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne ändert, während sie auf- und untergeht. Die Sonne beginnt dunkelrot, wenn sie unter dem Horizont ist, und wechselt zu einem hellen Orange, wenn sie den höchsten Punkt erreicht.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* it is possible to animate multiple properties in a single animation */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* unset properties i.e. 'filter' will revert to default values */
  }
}

Hier ist eine Sonne, die auf einem hellblauen Hintergrund auf- und untergeht. Die Sonne dreht sich allmählich durch ein Regenbogen von Farben. Das Timing der Position und Farbe der Sonne sind unabhängig.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* multiple animations are separated by commas, each animation's parameters are set independently */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne springt zwischen den linken und rechten Seiten des Viewports hin und her. Die Sonne bleibt im Viewport, obwohl eine Aufstiegsanimation definiert ist. Die transform-Eigenschaft der Aufstiegsanimation wird von der Sprunganimation 'überschrieben'.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    animations declared later in the cascade will override the
    properties of previously declared animations
  */
  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

Siehe Verwendung von CSS-Animationen für weitere Beispiele.

• Verwendung von CSS-Animationen
• JavaScript AnimationEvent API