`animation` CSS-Eigenschaft

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die animation Shorthand CSS-Eigenschaft wendet eine Animation zwischen Stilen an. Sie ist eine Shorthand für animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state und animation-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 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%;
  }
}

Bestandteileigenschaften

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

Syntax

css

/* @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 einzelne <animation>-Deklarationen, getrennt durch Kommas, wobei jede <animation> Folgendes enthält:

<keyframes-name> oder none: Der Name eines @keyframes-Attributs, das die Animation spezifiziert, die auf ein Element angewendet wird. Der Anfangswert für animation-name ist none.
<animation-duration>: Bestimmt die Zeitdauer, die eine Animation benötigt, um einen Zyklus abzuschließen. Der Wert muss einer der verfügbaren in animation-duration sein. Der Anfangswert ist 0s.
<easing-function>: Bestimmt die Art der Übergänge. Der Wert muss einer der verfügbaren in animation-timing-function sein. Der Anfangswert ist ease.
<animation-delay>: Bestimmt die Wartezeit ab Anwendungsbeginn der Animation auf ein Element, bevor die Ausführung der Animation beginnt. Der Wert muss einer der verfügbaren in animation-delay sein. Der Anfangswert ist 0s.
<single-animation-direction>: Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der verfügbaren in animation-direction sein. Der Anfangswert für animation-direction ist normal.
<single-animation-iteration-count>: Die Anzahl der Wiederholungen der Animation. Der Wert muss einer der verfügbaren in animation-iteration-count 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 ihrer Ausführung angewendet werden sollen. Der Wert muss einer der verfügbaren in animation-fill-mode 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 verfügbaren in animation-play-state sein. Der Anfangswert für animation-play-state ist running.
<single-animation-timeline>: Bestimmt die Zeitleiste, die zur Steuerung des Fortschritts der Animation verwendet wird. Der Wert muss einer der verfügbaren in animation-timeline sein. Der Anfangswert ist auto.

Die animation-Eigenschaft wird als eine oder mehrere einzelne Animationen spezifiziert, getrennt durch Kommas. Jede animation innerhalb der kommagetrennten Liste von Animationen bestimmt die animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state und animation-timeline. Wenn eine der Komponenten in einer animation-Deklaration nicht enthalten ist, wird der Komponentenwert auf den initialen Wert der Komponente gesetzt.

animation-name

Die <animation-name>-Komponente jeder Animation ist der Name der 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 animation-Shorthand-Eigenschaft deklariert wird, keine Animation auf irgendeine der Eigenschaften angewendet wird.

Die Reihenfolge der anderen Werte innerhalb einer Animationsdefinition ist wichtig, um einen animation-name-Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation-Shorthand als 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 ist es empfohlen, den Wert für animation-name als letzten Wert in einer Liste von Werten zu spezifizieren, wenn die animation-Shorthand verwendet wird; das gilt auch dann, wenn mehrere, kommagetrennte Animationen mit der animation-Shorthand spezifiziert werden.

Zeitwerte

Jede Animation kann null, einen 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 der animation-duration zugewiesen, und der zweite wird der animation-delay zugewiesen.

Wenn kein animation-duration-Wert in der animation-Shorthand-Eigenschaft angegeben wird, wird die Dauer standardmäßig auf 0s gesetzt. In diesem Fall findet die Animation dennoch statt (die animationStart und animationEnd Ereignisse werden ausgelöst), aber keine Animation wird für den Benutzer sichtbar sein.

animation-timeline

Wenn keine <animation-timeline> in der animation-Shorthand enthalten ist, setzt die Shorthand-Deklaration alle zuvor deklarierten animation-timeline-Werte auf auto, wodurch die Zeitleiste auf die Standard-documentTimeline gesetzt wird.

Wenn ein <animation-timeline>-Wert enthalten ist, der User-Agent jedoch keine <animation-timeline>-Werte innerhalb der Shorthand unterstützt, ist die gesamte animation-Deklaration ungültig und wird ignoriert. Aus diesem Grund muss bei der Erstellung von CSS-Scroll-gesteuerten Animationen die animation-timeline-Eigenschaft nach der Deklaration von irgendeiner animation-Shorthand deklariert werden, damit sie wirksam wird.

Alternativ kann die <animation-timeline> innerhalb der animation-Shorthand in einem CSS-@supports-Block gesetzt werden, wie zum Beispiel:

css

@supports (animation: view()) {
  /* CSS for browsers supporting <animation-timeline> within `animation` shorthand */
}

animation-fill-mode und neue Stapelkontexte

Im Fall des animation-fill-mode forwards-Wertes verhalten sich die animierten Eigenschaften, als ob sie in einer Menge von will-change-Eigenschaften enthalten wären. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Zielelement den Stapelkontext bei, nachdem die Animation abgeschlossen ist.

Barrierefreiheit

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

Es ist ratsam, eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitzustellen und die reduced motion @media-Abfrage zu verwenden, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Vorliebe für reduzierte animierte Erlebnisse geäußert haben.

Designing Safer Web Animation For Motion Sensitivity über A List Apart (2015)
An Introduction to the Reduced Motion Media Query über CSS-Tricks (2017)
Responsive Design for Motion über WebKit (2017)
Understanding WCAG, Guideline 2.2 — Enough Time: Provide users enough time to read and use content
Understanding WCAG Success Criterion 2.2.2: Pause, Stop, Hide über W3C (2026)

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `animation-name`: `none` `animation-duration`: `0s` `animation-timing-function`: `ease` `animation-delay`: `0s` `animation-iteration-count`: `1` `animation-direction`: `normal` `animation-fill-mode`: `none` `animation-play-state`: `running` `animation-timeline`: `auto`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `animation-name`: wie angegeben `animation-duration`: wie angegeben `animation-timing-function`: wie angegeben `animation-delay`: wie angegeben `animation-direction`: wie angegeben `animation-iteration-count`: wie angegeben `animation-fill-mode`: wie angegeben `animation-play-state`: wie angegeben `animation-timeline`: a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
Animationstyp	Not animatable

Formaler 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

Hinweis: Es wird davon abgeraten, Eigenschaften des CSS-Boxmodells zu animieren, da dies zu Layout-Neuberechnungen und Neuzeichnungen führt. Das Animieren von Boxmodell-Eigenschaften ist an sich CPU-intensiv; es wird empfohlen, stattdessen die transform-Eigenschaft zu animieren.

Grundlegende Anwendung: ein Sonnenaufgang

In diesem Beispiel demonstrieren wir die grundlegende Anwendung der animation-Shorthand, indem wir eine gelbe Sonne über einem hellblauen Himmel animieren. Die Sonne steigt in die Mitte des Ansichtsbereichs und verschwindet dann aus dem Sichtfeld.

HTML

Wir fügen ein einzelnes <div>-Element hinzu, um unsere Sonne darzustellen.

html

<div class="sun"></div>

CSS

Wir beginnen mit der Erstellung der Sonne und des Himmels. Der Himmel ist die :root des HTML-Dokuments. Wir verbergen alle Inhalte, die außerhalb des Ansichtsbereichs liegen, was in unserem Fall jeder Teil der Sonne unterhalb des Horizonts ist, indem wir das overflow auf hidden setzen. Wir verwenden auch die justify-content-Eigenschaft, um die Sonne im Hintergrund zu zentrieren. Wir färben die Sonne gelb, deklarieren ihre height als die Höhe des Ansichtsbereichs (100vh) und setzen ihre Breite auf die gleiche Höhe, indem wir das aspect-ratio auf 1 setzen. Wir verwandeln das quadratische <div> in einen Kreis mithilfe der border-radius-Eigenschaft.

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1;
  animation: 4s linear 0s infinite alternate sunrise;
}

Als Nächstes definieren wir einige Animations-@keyframes, die das Element, auf das sie angewendet werden, über den Ansichtsbereich hinaus schieben und dann das Element in seine Ausgangsposition zurückbringen, indem CSS-Transformationen verwendet werden:

css

@keyframes sunrise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

Der letzte Schritt besteht darin, die Animation anzuwenden! Wir verwenden die animation-Shorthand-Eigenschaft, um die sunrise-Keyframe-Animation auf das .sun <div> anzuwenden. Die Animation ist eingestellt, unendlich oft zu laufen, wobei jede Iteration 4 Sekunden dauert; die Animationsrichtung wechselt mit jeder Iteration:

css

.sun {
  animation: 4s linear 0s infinite alternate sunrise;
}

Ergebnisse

Anwendung mehrerer Animationen

Dieses Beispiel zeigt, wie mehrere Animationen auf ein einzelnes Element angewendet werden können. Aufbauend auf dem vorherigen Beispiel mit einer Sonne, die über einem hellblauen Hintergrund auf- und untergeht, werden wir hier die Sonne allmählich durch einen Regenbogen von Farben rotieren lassen. Die Zeitsteuerung der Position und der 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;
}

@keyframes sunrise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

Wir verwenden das gleiche HTML und CSS wie im vorherigen Beispiel und fügen eine zweite Reihe von Animations-@keyframes hinzu, um einen filter anzuwenden, der den Farbton durch alle möglichen Werte mit der hue-rotate() Filterfunktion rotieren lässt:

css

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

Dann wenden wir die beiden Animationen auf unsere Sonne an. Mehrere Animationen sind durch Kommas getrennt, und die Parameter jeder Animation werden unabhängig festgelegt:

css

.sun {
  animation:
    4s linear 0s infinite alternate sunrise,
    24s linear 0s infinite psychedelic;
}

Ergebnisse

Kaskadieren mehrerer Animationen

Dieses Beispiel demonstriert, was passiert, wenn mehrere Animationen Werte für die gleiche Eigenschaft definieren. Dieses Beispiel erweitert das Grundlegende Anwendung-Beispiel, wobei zwei Animationen angewendet werden, die beide einen transform-Wert setzen.

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

Wir verwenden das gleiche HTML und CSS wie im ersten Beispiel, einschließlich der Original-sunrise-Animation und einer zweiten Animation namens bounce. Die beiden Animationen deklarieren Werte für die gleiche Eigenschaft:

css

@keyframes sunrise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

Wir wenden beide Animationen auf die Sonne an. Wenn zwei Animationen unterschiedliche Werte für die gleiche Eigenschaft anwenden, überschreiben die später in der Kaskade deklarierten Animationen die zuvor deklarierten Animationen. In diesem Fall "gewinnt" der transform-Wert der bounce-Animation die Kaskade und überschreibt die von sunrise gesetzte Transformation, sodass sich die Sonne nur horizontal bewegt.

css

.sun {
  animation:
    4s linear 0s infinite alternate sunrise,
    4s linear 0s infinite alternate bounce;
}

Ergebnisse

Die Sonne bewegt sich zwischen den linken und rechten Seiten des Ansichtsbereichs. Die Sonne bleibt innerhalb des Ansichtsbereichs, obwohl die sunrise-Animation definiert ist. Die transform-Eigenschaft der sunrise-Animation wird von der bounce-Animation überschrieben.

Spezifikationen

Spezifikation
CSS Animations Level 1 # animation

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Animationen
JavaScript-AnimationEvent-API

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

animation CSS-Eigenschaft

HTML

CSS

Ergebnisse

Ergebnisse

Ergebnisse

Help improve MDN

`animation` CSS-Eigenschaft