animation

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

Jede einzelne Animation wird wie folgt angegeben:

• null, einer 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 die Art des Übergangs. Der Wert muss einer der in <easing-function> verfügbaren sein.

<single-animation-iteration-count>

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

<single-animation-direction>

Die Richtung, in die die Animation abgespielt 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 der Animation auf das Ziel 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-Kurzschrift als ein Wert für eine andere Animationseigenschaft als animation-name geparst werden kann, wird der Wert zuerst auf diese Eigenschaft und nicht auf animation-name angewendet. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Liste von Werten zu spezifizieren, wenn Sie die animation-Kurzschrift verwenden; dies gilt auch, wenn Sie mehrere, durch Kommas getrennte Animationen mit der animation-Kurzschrift angeben.

Obwohl ein Animationsname gesetzt werden muss, um eine Animation anzuwenden, sind alle Werte der animation-Kurzschrift optional und standardmäßig auf den Anfangswert für jede ausführliche animation-Komponente festgelegt. Der Anfangswert von animation-name ist none, was bedeutet, dass wenn kein animation-name-Wert in der animation-Kurzschrift-Eigenschaft deklariert ist, keine Animation auf irgendwelche Eigenschaften angewendet wird.

Wenn der animation-duration-Wert von der animation-Kurzschrift-Eigenschaft weggelassen wird, wird dieser Eigenschaftswert standardmäßig auf 0s gesetzt. In diesem Fall wird die Animation weiterhin stattfinden (die animationStart- und animationEnd-Ereignisse werden ausgelöst), aber es wird keine Animation sichtbar sein.

Im Fall des animation-fill-mode forwards-Werts verhalten sich animierte Eigenschaften, als ob sie in einem Set-[will-change](/de/docs/Web/CSS/will-change)-Eigenschaftswert enthalten wären. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Zielelement den Stapelkontext bei, nachdem die Animation beendet ist.

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

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen anzubieten, sowie die Verwendung der Media Query für reduzierte Bewegung, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationen angegeben haben.

• Designing Safer Web Animation For Motion Sensitivity · Ein A List Apart Artikel
• Einführung in die Media Query für reduzierte Bewegung | CSS-Tricks
• Responsive Design für Bewegung | WebKit
• MDN Verständnis WCAG, Richtlinie 2.2 Erklärungen
• Verständnis des Erfolgskriteriums 2.2.2 | W3C Verständnis der 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 einen hellblauen Himmel. Die Sonne erhebt sich in die Mitte des Viewports und fällt dann aus dem Blickfeld.

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

In der Fortsetzung der Sonnenanimation im vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne beim Auf- und Untergang verändert. Die Sonne beginnt dunkelrot, wenn sie unter dem Horizont ist, und wechselt zu einem leuchtenden 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 rotiert allmählich durch ein Regenbogenspektrum von Farben. Das Timing der Position und Farbe der Sonne ist 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 prallt zwischen der linken und rechten Seite 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);
  }
}

Sehen Sie Verwendung von CSS-Animationen für weitere Beispiele.

• Verwendung von CSS-Animationen
• JavaScript AnimationEvent API