DieanimationShorthandCSS Eigenschaft wendet eine Animation zwischen Stilen an. Sie ist eine Kurzform füranimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state undanimation-timeline.

Probieren Sie es aus

animation: 3s ease-in 1s infinite reverse both running slide-in;

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

<section>  <div></div></section>

#example-element {  background-color: #1766aa;  margin: 20px;  border: 5px solid #333333;  width: 150px;  height: 150px;  border-radius: 50%;}@keyframes slide-in {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}

Bestandteilseigenschaften

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

Syntax

/* @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;

Dieanimation Eigenschaft wird als eine oder mehrere einzelne Animationen spezifiziert, getrennt durch Kommata.

Jede individuelle Animation wird wie folgt spezifiziert:

• null, ein oder zwei Vorkommen des<time> Wertes

• 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, dernone, ein<custom-ident> oder ein<string> sein kann

Werte

<single-easing-function>

Bestimmt den Übergangstyp. 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 inanimation-iteration-count verfügbaren sein.

<single-animation-direction>

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

<single-animation-fill-mode>

Bestimmt, wie die Stile auf das Animationsziel vor und nach der Ausführung angewendet werden sollen. Der Wert muss einer der inanimation-fill-mode verfügbaren sein.

<single-animation-play-state>

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

Beschreibung

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

Die Reihenfolge der anderen Werte innerhalb jeder Animationsdefinition ist ebenfalls wichtig, um einenanimation-name Wert von anderen Werten zu unterscheiden. Wenn ein Wert imanimation Shorthand als Wert für eine Animationseigenschaft geparst werden kann, die nichtanimation-name ist, wird der Wert zuerst auf diese Eigenschaft angewendet und nicht aufanimation-name. Aus diesem Grund ist es die empfohlene Praxis, einen Wert füranimation-name als letzten Wert in einer Liste von Werten anzugeben, wenn Sie dasanimation Shorthand verwenden, auch wenn Sie mehrere, durch Komma getrennte Animationen mit demanimation Shorthand angeben.

Während ein Animationsname festgelegt werden muss, damit eine Animation angewendet wird, sind alle Werte desanimation Shorthands optional und standardmäßig auf den Anfangswert für jede Langform-animation-Komponente gesetzt. Der Anfangswert vonanimation-name istnone, was bedeutet, dass, wenn keinanimation-name Wert imanimation Shorthand angegeben wird, keine Animation auf eine der Eigenschaften angewendet wird.

Wenn deranimation-duration Wert imanimation Shorthand weggelassen wird, ist der Wert für diese Eigenschaft standardmäßig0s. In diesem Fall wird die Animation dennoch stattfinden (dieanimationStart undanimationEnd Ereignisse werden ausgelöst), aber es wird keine sichtbare Animation angezeigt.

Im Falle desanimation-fill-modeforwards Wertes verhalten sich animierte Eigenschaften so, als ob sie in einemwill-change Eigenschaftswert enthalten wären. Wenn während der Animation ein neuer Stacking-Kontext erstellt wird, behält das Ziel-Element den Stacking-Kontext bei, nachdem die Animation abgeschlossen ist.

Barrierefreiheit

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

Überlegen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren der Animation bereitzustellen, und verwenden Sie dieReduced Motion Media Query, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationserlebnisse angegeben haben.

• Designing Safer Web Animation For Motion Sensitivity · Ein A List Apart Artikel
• Einführung in die Reduced Motion Media Query | CSS-Tricks
• Responsive Design für Bewegungen | WebKit
• MDN Verstehen der WCAG, Erläuterungen zu Leitlinie 2.2
• Verständnis des Erfolgs-Kriteriums 2.2.2 | W3C Verstehen der WCAG 2.0

Formale Definition

Formale Syntax

animation =
<single-animation>#

<single-animation> =
<'animation-duration'>||
<easing-function>||
<'animation-delay'>||
<single-animation-iteration-count>||
<single-animation-direction>||
<single-animation-fill-mode>||
<single-animation-play-state>||
[none|<keyframes-name>]||
<single-animation-timeline>

<animation-duration> =
[auto|<time [0s,∞]>]#

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

<animation-delay> =
<time>#

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

<single-animation-timeline> =
auto|
none|
<dashed-ident>|
<scroll()>|
<view()>

<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()>

<scroll()> =
scroll([<scroller>||<axis>]?)

<view()> =
view([<axis>||<'view-timeline-inset'>]?)

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

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

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

<scroller> =
root|
nearest|
self

<axis> =
block|
inline|
x|
y

<view-timeline-inset> =
[[auto|<length-percentage>]{1,2}]#

<integer> =
<number-token>

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

<length-percentage> =
<length>|
<percentage>

Beispiele

Sonnenaufgang

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

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

Animieren mehrerer Eigenschaften

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

<div></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 */  }}

Anwenden mehrerer Animationen

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 ist unabhängig.

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

Überlappende Mehrfach-Animationen

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 Steiganimations definiert ist. Die Transform-Eigenschaft der Steiganimation wird von der Sprunganimation "überschrieben".

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

SieheVerwendung von CSS-Animationen für zusätzliche Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Animationen
• JavaScriptAnimationEvent API