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

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die animation-Eigenschaft in CSS ist eine Kurzform und wendet eine Animation zwischen Stilen an. Es ist eine Kurzform 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%;
  }
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform 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 <animation>-Deklarationen als Einzelangaben, getrennt durch Kommas, wobei jede <animation> Folgendes beinhaltet:

<keyframes-name> oder none: Der Name einer @keyframes-Regel, die die auf ein Element anzuwendende Animation angibt. Der Anfangswert für animation-name ist none.
<animation-duration>: Bestimmt die Zeitspanne, 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 den Übergangstyp. Der Wert muss einer der in animation-timing-function verfügbaren sein. Der Anfangswert ist ease.
<animation-delay>: Bestimmt die Wartezeit, bevor eine Animation nach der Anwendung auf ein Element 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 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. 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 zur Steuerung des Fortschritts der Animation verwendet wird. Der Wert muss einer der in animation-timeline verfügbaren sein. Der Anfangswert ist auto.

Die animation-Eigenschaft wird als eine oder mehrere Einzelanimationen angegeben, getrennt durch Kommas. Jede animation innerhalb der durch Kommas getrennten Liste von Animationen setzt 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 Wert der Komponente auf den Anfangswert der Komponente gesetzt.

animation-name

Die <animation-name>-Komponente jeder Animation ist der Name der Animation, der none, eine <custom-ident> oder eine <string> sein kann. Der Anfangswert von animation-name ist none, was bedeutet, dass, wenn kein animation-name-Wert in der animation-Kurzformdeklaration enthalten ist, keine Animation auf irgendwelche 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-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 Liste von Werten bei der Verwendung der animation-Kurzform anzugeben; dies gilt auch, wenn Sie mehrere, durch Kommas getrennte Animationen mit der animation-Kurzform angeben.

Zeitwerte

Jede Animation kann null, ein oder zwei Vorkommen des <time>-Werts 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 wird animation-delay zugewiesen.

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

animation-timeline

Wenn keine <animation-timeline>-Angabe in der animation-Kurzform enthalten ist, setzt die Kurzformdeklaration alle zuvor deklarierten animation-timeline-Werte auf auto zurück, wodurch die Zeitleiste auf die Standard-documentTimeline gesetzt wird.

Wenn ein <animation-timeline>-Wert enthalten ist, der Benutzeragent jedoch <animation-timeline>-Werte innerhalb der Kurzform nicht unterstützt, ist die gesamte animation-Deklaration ungültig und wird ignoriert. Aus diesem Grund müssen bei der Erstellung von CSS scroll-getriebenen Animationen die animation-timeline-Eigenschaft nach der Deklaration einer animation-Kurzform angegeben werden, damit sie wirksam wird.

Alternativ kann die <animation-timeline> innerhalb der animation-Kurzform in einem CSS @supports-Block festgelegt werden, wie z.B.:

css

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

animation-fill-mode und neue Stacking-Kontexte

Im Fall des animation-fill-mode forwards Wertes verhalten sich animierte Eigenschaften so, als ob sie in einem Set will-change-Eigenschaftswert enthalten wären. Wenn während der Animation ein neuer Stacking-Kontext erstellt wird, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation beendet ist.

Barrierefreiheit

Blinkende und flackernde Animationen können für Menschen mit kognitiven Anliegen wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Bewegungsarten ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und fototoxische Empfindlichkeiten sein.

Es ist ratsam, eine Möglichkeit anzubieten, Animationen zu pausieren oder zu deaktivieren, sowie die reduzierte Bewegungs-@media-Abfrage zu verwenden, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Vorliebe für weniger animierte Erlebnisse ausgedrückt 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

Formale Syntax

animation = 
  <single-animation>#  

<single-animation> = 
  <'animation-duration'>              ||
  <easing-function>                   ||
  <'animation-delay-start'>           ||
  <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-start> = 
  <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: Das Animieren von CSS-Boxmodel-Eigenschaften wird nicht empfohlen, da dies zu Layout-Neuberechnungen und Neuzeichnungen führt. Das Animieren jeglicher Boxmodell-Eigenschaft ist von Natur aus CPU-intensiv; überlegen Sie, stattdessen die transform-Eigenschaft zu animieren.

Grundlegende Verwendung: ein Sonnenaufgang

In diesem Beispiel demonstrieren wir die grundlegende Verwendung der animation-Kurzform, indem wir eine gelbe Sonne über einen hellblauen Himmel animieren. Die Sonne steigt in die Mitte der Ansicht an und fällt dann aus dem Blickfeld.

HTML

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

html

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

CSS

Wir beginnen mit der Erstellung der Sonne und des Himmels. Der Himmel ist das :root des HTML-Dokuments. Wir verbergen Inhalte, die außerhalb der Ansicht liegen, was in unserem Fall jeder Teil der Sonne unterhalb des Horizonts sein wird, indem wir das overflow auf hidden setzen. Wir verwenden auch die justify-content-Eigenschaft, um die Sonne im Hintergrund zu zentrieren. Wir machen die Sonne gelb, geben ihr die height der Ansichtshöhe (100vh), und setzen ihre Breite gleich ihrer Höhe, indem wir das aspect-ratio auf 1 setzen. Wir verwandeln das quadratische <div> in einen Kreis mit 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 Animation-@keyframes, die das Element, auf das sie angewendet werden, über die Ansicht hinausschieben und dann das Element in seine Standardposition zurückbringen, unter Verwendung von CSS-Transformationen:

css

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

Der letzte Schritt ist die Anwendung der Animation! Wir verwenden die animation-Kurzform, um die sunrise-Keyframe-Animation auf das .sun <div> anzuwenden. Die Animation ist so eingestellt, dass sie unendlich oft abgespielt wird, wobei jede Iteration 4 Sekunden dauert; die Animationsrichtung wechselt mit jeder Iteration:

css

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

Ergebnisse

Mehrere Animationen anwenden

Dieses Beispiel demonstriert die Anwendung mehrerer Animationen auf ein einzelnes Element. Basierend auf dem vorherigen Beispiel, bei dem eine Sonne über einen hellblauen Hintergrund steigt und fällt, werden wir hier die Sonne allmählich durch einen Regenbogen von Farben drehen. Das Timing der Sonnenposition und 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;
}

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

Wir verwenden dasselbe HTML und CSS wie im vorherigen Beispiel und fügen ein zweites Set von @keyframes für die Animation hinzu, bei dem ein filter angewendet wird, der die Farbtonrotation durch alle möglichen Werte unter Verwendung der hue-rotate() Filterfunktion durchläuft:

css

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

Wir wenden dann die beiden Animationen auf unsere Sonne an. Mehrere Animationen werden 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

Mehrere Animationen kaskadieren

Dieses Beispiel zeigt, was passiert, wenn mehrere Animationen Werte für dieselbe Eigenschaft definieren. Dieses Beispiel erweitert das Grundlegende Nutzung-Beispiel, indem zwei Animationen angewendet werden, die beide einen transform-Wert festlegen.

<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 dasselbe HTML und CSS wie im ersten Beispiel, einschließlich der ursprünglichen sunrise-Animation, und einer zweiten Animation namens bounce. Die beiden Animationen deklarieren Werte für dieselbe 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 dieselbe Eigenschaft anwenden, überschreiben später deklarierte Animationen in der Kaskade die zuvor deklarierten. In diesem Fall "gewinnt" der transform-Wert der bounce-Animation die Kaskade und überschreibt die Transformationswerte, die von sunrise gesetzt wurden, 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 springt zwischen den linken und rechten Seiten der Ansicht. Die Sonne bleibt in der Ansicht, obwohl die sunrise-Animation definiert ist. Die sunrise-Animationseigenschaft transform wird durch die 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