animation

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 class="flex-column" id="default-example">
  <div id="example-element"></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%;
  }
}

Zusammengesetzte Eigenschaften

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;

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

Jede einzelne Animation wird angegeben als:

• null, einmal oder zweimal Auftreten des Wertes <time>

• null oder einmal Auftreten 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.

Werte

<single-easing-function>

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

<single-animation-iteration-count>

Die Anzahl der Durchläufe der Animation. 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 der 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.

Beschreibung

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

Die Reihenfolge anderer Werte innerhalb jeder Animationsdefinition ist auch wichtig, um einen animation-name-Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation-Kurzform als Wert für eine andere Animationseigenschaft als animation-name geparst werden kann, wird der Wert zuerst auf diese Eigenschaft angewendet und nicht auf animation-name. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Werteliste anzugeben, wenn Sie die animation-Kurzform verwenden; dies gilt auch, wenn Sie mehrere durch Kommas getrennte Animationen unter Verwendung der animation-Kurzform angeben.

Während ein Animationsname festgelegt werden muss, damit eine Animation angewendet werden kann, sind alle Werte der animation-Kurzform optional und standardmäßig auf den Anfangswert für jede Langformkomponente von animation festgelegt. Der Anfangswert von animation-name ist none, was bedeutet, dass, wenn kein animation-name-Wert in der animation-Kurzform-Eigenschaft deklariert ist, keine Animation auf eine der Eigenschaften angewendet wird.

Wenn der animation-duration-Wert in der animation-Kurzform-Eigenschaft weggelassen wird, ist der Standardwert dieser Eigenschaft 0s. In diesem Fall wird die Animation dennoch ausgeführt (die Ereignisse animationStart und animationEnd werden ausgelöst), aber es wird keine Animation sichtbar sein.

Im Fall des animation-fill-mode forwards-Werts verhalten sich animierte Eigenschaften, als wären sie in einem Set will-change-Eigenschaftswert enthalten. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Zielelement den Stapelkontext auch nach Abschluss der Animation bei.

Barrierefreiheit

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

Überlegen Sie, einen Mechanismus bereitzustellen, um Animationen zu pausieren oder zu deaktivieren, sowie die Reduced Motion Media Query zu verwenden, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Vorliebe für reduzierte Animationen geäußert haben.

• Designing Safer Web Animation For Motion Sensitivity · Ein Artikel von A List Apart
• Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Verständnis WCAG, Leitfaden 2.2 Erklärungen
• Erklärung des Erfolgskriteriums 2.2.2 | W3C Verständnis 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} ]#  

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

Animation mehrerer Eigenschaften

Aufbauend auf der Sonnenanimation im vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne während ihres Auf- und Untergangs ändert. Die Sonne beginnt dunkelrot, wenn sie sich unterhalb des Horizonts befindet, und wechselt zu einem hellen Orange, wenn sie die Spitze 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 */
  }
}

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

Kaskadierung mehrerer Animationen

Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne bewegt sich 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 Bounce-Animation 'ü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.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Animationen
• JavaScript AnimationEvent API