animation

Diese Eigenschaft ist eine Kurzschreibweise 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 Einzelanimationen angegeben, die durch Kommas getrennt sind.

Jede einzelne Animation wird wie folgt angegeben:

• null, eine oder zwei Vorkommen des <time>-Werts

• null oder ein Vorkommen der 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

<single-easing-function>

Bestimmt den Typ der Übergangs. Der Wert muss einer der in <easing-function> verfügbaren sein.

<single-animation-iteration-count>

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

<single-animation-direction>

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

<single-animation-fill-mode>

Bestimmt, wie Stile vor und nach der Ausführung auf das Ziel der Animation 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 anderer 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 ein Wert für eine Animationseigenschaft außer animation-name geparst werden kann, wird der Wert zunächst dieser Eigenschaft und nicht animation-name zugewiesen. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Liste von Werten anzugeben, wenn die animation-Kurzform verwendet wird; dies gilt auch dann, wenn Sie mehrere, durch Kommas getrennte Animationen mit der animation-Kurzform angeben.

Obwohl ein Animationsname festgelegt werden muss, damit eine Animation angewendet wird, sind alle Werte der animation-Kurzform optional und standardmäßig auf den Anfangswert für jede Langform-animation-Komponente eingestellt. Der Anfangswert von animation-name ist none, was bedeutet, dass, wenn kein animation-name-Wert in der animation-Kurzform deklariert wird, es keine Animation gibt, die auf eine der Eigenschaften angewendet wird.

Wenn der animation-duration-Wert in der animation-Kurzform weggelassen wird, wird der Wert dieser Eigenschaft standardmäßig auf 0s gesetzt. In diesem Fall findet die Animation dennoch statt (die Ereignisse animationStart und animationEnd werden ausgelöst), aber es wird keine Animation sichtbar.

Für den animation-fill-mode-Wert forwards verhalten sich animierte Eigenschaften so, als wären sie in einem festgelegten will-change-Eigenschaftswert enthalten. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Zielobjekt den Stapelkontext bei, nachdem die Animation beendet ist.

Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Außerdem können bestimmte Bewegungsarten ein Auslöser für vestibuläre Störungen, Epilepsie sowie Migräne und skotopische Empfindlichkeit sein.

Erwägen Sie die Bereitstellung eines Mechanismus zum Anhalten oder Deaktivieren von Animationen sowie die Verwendung der Motion-Reduced-Media-Abfrage, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für weniger animierte Erlebnisse geäußert haben.

• Designing Safer Web Animation For Motion Sensitivity · Ein Artikel von A List Apart
• Eine Einführung in die Motion-Reduced-Media-Abfrage | CSS-Tricks
• Responsive Design für Bewegung | WebKit
• MDN Verständnis WCAG, Leitfaden 2.2 Erklärungen
• Verstehen des Erfolgs-Kriteriums 2.2.2 | W3C Verständnis 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 bis zur Mitte des Ansichtsfensters auf und fällt dann außer Sicht.

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

Als Erweiterung der Sonnenanimation aus dem vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne ändert, während sie aufsteigt und untergeht. Die Sonne beginnt dunkelrot, wenn sie unterhalb des Horizonts ist, und ändert sich zu einem hellen Orange, wenn sie den Gipfel 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 rotiert allmählich durch ein Spektrum von Farben. Die Zeitabstimmung der Position und Farbe der Sonne sind unabhängig voneinander.

<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 Ansichtsfensters hin und her. Die Sonne bleibt im Ansichtsfenster, obwohl eine Aufstiegsanimation definiert ist. Die Transformations-Eigenschaft der Aufstiegsanimation wird durch die 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 zusätzliche Beispiele.

• Verwendung von CSS-Animationen
• JavaScript AnimationEvent API