animation CSS-Eigenschaft

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

Bestandteil-Eigenschaften

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

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

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;

Werte

Eine oder mehrere <animation>-Deklarationen, getrennt durch Kommata, wobei jedes <animation> folgendes umfasst:

<keyframes-name> oder none

Der Name einer @keyframes-Regel, die die auf ein Element anzuwendende Animation spezifiziert. Der Anfangswert für animation-name ist none.

<animation-duration>

Bestimmt die Dauer, die eine Animation benötigt, um einen Zyklus abzuschließen. Der Wert muss einer der in animation-duration verfügbaren sein. Der Anfangswert ist 0s.

<easing-function>

Bestimmt die Art des Übergangs. Der Wert muss einer der in animation-timing-function verfügbaren sein. Der Anfangswert ist ease.

<animation-delay>

Bestimmt die Zeitspanne, die nach dem Anwenden der Animation auf ein Element gewartet werden soll, bevor die Animation beginnt. Der Wert muss einer der in animation-delay verfügbaren sein. Der Anfangswert ist 0s.

<single-animation-direction>

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

<single-animation-iteration-count>

Die Anzahl der Wiederholungen der Animation. Der Wert muss einer der in animation-iteration-count verfügbaren sein. Der Anfangswert für animation-iteration-count ist 1.

<single-animation-fill-mode>

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

<single-animation-play-state>

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

<single-animation-timeline>

Bestimmt die Zeitleiste, die verwendet wird, um den Fortschritt der Animation zu kontrollieren. Der Wert muss einer der in animation-timeline verfügbaren sein. Der Anfangswert ist auto.

Beschreibung

Die animation-Eigenschaft wird als eine oder mehrere einzelne Animationen angegeben, die durch Kommata getrennt sind. Jede animation in der Liste der durch Kommata getrennten Animationen legt animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, und animation-timeline fest. Wenn keine der Komponenten in einer animation-Deklaration enthalten ist, wird der Komponentwert auf den Anfangswert der Komponente gesetzt.

animation-name

Die <animation-name>-Komponente jeder Animation ist der Name für die Animation, der none, ein <custom-ident> oder ein <string> sein kann. Der Anfangswert von animation-name ist none, was bedeutet, dass, wenn kein animation-name-Wert in der Kurzform animation deklariert wird, keine Animation auf irgendeine der Eigenschaften angewendet wird.

Die Reihenfolge anderer Werte innerhalb einer Animationsdefinition ist wichtig, um einen animation-name-Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation-Kurzform als ein 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 ist die empfohlene Praxis, einen Wert für animation-name als letzten Wert in einer Liste von Werten zu spezifizieren, wenn die Kurzform animation verwendet wird; dies gilt auch, wenn mehrere, durch Kommata getrennte Animationen mit der Kurzform animation spezifiziert werden.

Zeitwerte

Jede Animation kann null, eins oder zwei Vorkommen des <time>-Wertes enthalten. 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 animation-delay.

Wenn kein animation-duration-Wert in der animation-Kurzform spezifiziert ist, beträgt die Dauer standardmäßig 0s. In diesem Fall wird die Animation dennoch durchgeführt (die animationStart und animationEnd-Ereignisse werden ausgelöst), aber es ist für den Benutzer keine Animation sichtbar.

animation-timeline

Die aktuellen Implementierungen von animation sind nur Rücksetzbar: Wenn kein <animation-timeline> in der animation-Kurzform enthalten ist, setzt die Kurzform-Deklaration alle zuvor erklärten animation-timeline-Werte auf auto zurück.

Standardmäßig ist das animation-timeline die documentTimeline. Wenn ein Wert enthalten ist, der Benutzeragent jedoch keine <animation-timeline>-Werte innerhalb der Kurzform unterstützt, ist die Deklaration ungültig und wird ignoriert.

Dies bedeutet, dass, wenn Sie CSS-scroll-gesteuerte Animationen erstellen, Sie die animation-timeline-Eigenschaft nach dem Deklarieren einer animation-Kurzform deklarieren müssen, damit sie wirksam wird.

Alternativ kann das animation-timeline innerhalb der animation-Kurzform innerhalb eines CSS-@supports-Blocks verwendet werden, wie zum Beispiel:

@supports (animation: view()) {
  /* CSS for browsers that support setting <animation-timeline> within the animation shorthand */
}

animation-fill-mode und neue Stacking-Kontexte

Im Fall des animation-fill-mode vorwärts-Wertes verhalten sich animierte Eigenschaften, als ob sie in einem Satz will-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 problematisch für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) sein. Darüber hinaus können bestimmte Arten von Bewegung Auslöser für Vestibularstörrungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

Überlegen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren der Animation sowie die Verwendung des Reduced Motion Media Query bereitzustellen, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationserlebnisse geäußert haben.

• Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
• An Introduction to the Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Understanding WCAG, Guideline 2.2 explanations
• Understanding Success Criterion 2.2.2 | W3C Understanding 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 bis zur Mitte des Viewports und fällt dann außer Sichtweite.

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

Mehrere Eigenschaften animieren

Ergänzend zur Sonnenanimation im vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne beim Auf- und Untergang ändert. Die Sonne beginnt unterhalb des Horizonts in dunklem Rot 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 */
  }
}

Mehrere Animationen anwenden

Hier ist eine Sonne, die auf einem hellblauen Hintergrund auf- und untergeht. Die Sonne dreht sich allmählich durch ein Farbenspektrum. Der Timing der Position der Sonne und die Farbe 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);
  }
}

Mehrere Animationen kaskadieren

Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne hüpft 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 zusätzliche Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Animationen
• JavaScript-API AnimationEvent