CSS-Eigenschaft `animation`

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Bestandteileigenschaften

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

<keyframes-name> oder none: Der Name einer @keyframes-At-Regel, die die auf ein Element anzuwendende Animation festlegt. Der Initialwert 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 Werte sein. Der Initialwert ist 0s.
<easing-function>: Bestimmt die Art des Übergangs. Der Wert muss einer der in animation-timing-function verfügbaren Werte sein. Der Initialwert ist ease.
<animation-delay>: Bestimmt die Wartezeit ab dem Anwenden der Animation auf ein Element, bevor die Ausführung der Animation beginnt. Der Wert muss einer der in animation-delay verfügbaren Werte sein. Der Initialwert ist 0s.
<single-animation-direction>: Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der in animation-direction verfügbaren Werte sein. Der Initialwert für animation-direction ist normal.
<single-animation-iteration-count>: Die Anzahl der Wiedergaben der Animation. Der Wert muss einer der in animation-iteration-count verfügbaren Werte sein. Der Initialwert für animation-iteration-count ist 1.
<single-animation-fill-mode>: Bestimmt, wie Stile vor und nach der Ausführung auf das Ziel der Animation angewendet werden sollen. Der Wert muss einer der in animation-fill-mode verfügbaren Werte sein. Der Initialwert 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 Werte sein. Der Initialwert für animation-play-state ist running.
<single-animation-timeline>: Bestimmt die Timeline, die zur Steuerung des Fortschritts der Animation verwendet wird. Der Wert muss einer der in animation-timeline verfügbaren Werte sein. Der Initialwert ist auto.

Die Eigenschaft animation wird als eine oder mehrere einzelne, durch Kommas getrennte Animationen angegeben. Jede animation in der durch Kommas getrennten Liste von Animationen setzt 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 nicht in einer animation-Deklaration enthalten ist, wird der Komponentenwert auf den Initialwert der Komponente gesetzt.

animation-name

Die Komponente <animation-name> jeder Animation ist der Name der Animation und kann none, ein <custom-ident> oder ein <string> sein. Der Initialwert von animation-name ist none. Das bedeutet, dass keine Animation auf eine der Eigenschaften angewendet wird, wenn in der Kurzform-Eigenschaft animation kein animation-name-Wert deklariert ist.

Die Reihenfolge anderer Werte innerhalb einer Animationsdefinition ist wichtig, um einen animation-name-Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der Kurzform animation 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. Daher wird empfohlen, bei Verwendung der Kurzform animation einen Wert für animation-name als letzten Wert in einer Werteliste anzugeben. Dies gilt auch dann, wenn Sie mit der Kurzform animation mehrere durch Kommas getrennte Animationen angeben.

Zeitwerte

Jede Animation kann null, ein oder zwei Vorkommen des Werts <time> 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 in der Kurzform-Eigenschaft animation kein animation-duration-Wert angegeben ist, beträgt die Dauer standardmäßig 0s. In diesem Fall findet die Animation dennoch statt (die Ereignisse animationStart und animationEnd werden ausgelöst), für Benutzer ist jedoch keine Animation sichtbar.

animation-timeline

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

Wenn ein <animation-timeline>-Wert enthalten ist, der User-Agent jedoch keine <animation-timeline>-Werte innerhalb der Kurzform unterstützt, ist die gesamte animation-Deklaration ungültig und wird ignoriert. Aus diesem Grund müssen Sie beim Erstellen von CSS-scrollgesteuerten Animationen die Eigenschaft animation-timeline nach einer beliebigen animation-Kurzform deklarieren, damit sie wirksam wird.

Alternativ kann <animation-timeline> innerhalb der Kurzform animation in einem CSS-@supports-Block gesetzt werden, beispielsweise:

css

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

animation-fill-mode und neue Stapelkontexte

Beim Wert forwards von animation-fill-mode verhalten sich animierte Eigenschaften so, als wären sie in einem gesetzten will-change-Eigenschaftswert enthalten. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Zielelement den Stapelkontext nach Abschluss der Animation bei.

Barrierefreiheit

Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen wie der Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Außerdem können bestimmte Arten von Bewegung Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Sensitivität sein.

Ziehen Sie in Betracht, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen, und verwenden Sie die @media-Abfrage für reduzierte Bewegung, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für weniger Animationen angegeben 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 Eigenschaften des CSS-Boxmodells wird nicht empfohlen, da dies Layout-Reflows und Neuzeichnungen verursacht. Das Animieren einer beliebigen Boxmodell-Eigenschaft ist von Natur aus CPU-intensiv; ziehen Sie stattdessen das Animieren der Eigenschaft transform in Betracht.

Grundlegende Verwendung: ein Sonnenaufgang

In diesem Beispiel demonstrieren wir die grundlegende Verwendung der Kurzform animate, indem wir eine gelbe Sonne über einen hellblauen Himmel animieren. Die Sonne steigt bis zur Mitte des Viewports auf und fällt dann aus dem Sichtbereich.

HTML

Wir fügen ein einzelnes <div>-Element ein, das unsere Sonne darstellt.

html

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

CSS

Wir beginnen mit der Erstellung der Sonne und des Himmels. Der Himmel ist das :root des HTML-Dokuments. Indem wir overflow auf hidden setzen, blenden wir sämtlichen Inhalt aus, der sich außerhalb des Viewports befindet, in unserem Fall also jeden Teil der Sonne unterhalb des Horizonts. Außerdem verwenden wir die Eigenschaft justify-content, um die Sonne im Hintergrund zu zentrieren. Wir machen die Sonne gelb, deklarieren ihre height als die Höhe des Viewports (100vh) und setzen ihre Breite gleich ihrer Höhe, indem wir aspect-ratio auf 1 setzen. Mithilfe der Eigenschaft border-radius verwandeln wir das quadratische <div> in einen Kreis.

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 Viewport hinaus nach unten verschieben und das Element dann mithilfe von CSS-Transformationen an seine Standardposition zurückbringen:

css

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

Der letzte Schritt besteht darin, die Animation anzuwenden! Wir verwenden die Kurzform-Eigenschaft animation, um die Keyframe-Animation sunrise auf das <div> .sun anzuwenden. Die Animation wird in unendlichen Wiederholungen abgespielt, die jeweils 4 Sekunden dauern; die Animationsrichtung wechselt mit jeder Wiederholung:

css

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

Ergebnisse

Mehrere Animationen anwenden

Dieses Beispiel demonstriert das Anwenden mehrerer Animationen auf ein einzelnes Element. Aufbauend auf dem vorherigen Beispiel, mit einer Sonne, die auf einem hellblauen Hintergrund auf- und untergeht, drehen wir die Sonne hier allmählich durch einen Regenbogen von Farben. Das Timing der Position und der 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;
}

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

Wir verwenden dasselbe HTML und CSS wie im vorherigen Beispiel und fügen einen zweiten Satz von Animations-@keyframes hinzu, um einen filter anzuwenden, der den Farbton mithilfe der Filterfunktion hue-rotate() durch alle möglichen Werte dreht:

css

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

Anschließend wenden wir 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

Kaskadieren mehrerer Animationen

Dieses Beispiel demonstriert, was passiert, wenn mehrere Animationen Werte für dieselbe Eigenschaft definieren. Dieses Beispiel erweitert das Beispiel zur grundlegenden Verwendung um zwei angewendete Animationen, 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, sowie eine zweite 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 auf dieselbe Eigenschaft anwenden, überschreiben später in der Kaskade deklarierte Animationen zuvor deklarierte Animationen. In diesem Fall gewinnt der transform-Wert der Animation bounce 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 springt zwischen der linken und rechten Seite des Viewports hin und her. Die Sonne bleibt im Viewport, obwohl die Animation sunrise definiert ist. Die Eigenschaft transform der Animation sunrise wird durch die Animation bounce überschrieben.

Spezifikationen

Spezifikation
CSS Animations Level 1 # animation

Browser-Kompatibilität

Siehe auch

CSS-Animationen verwenden
JavaScript-API AnimationEvent

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

CSS-Eigenschaft animation

HTML

CSS

Ergebnisse

Ergebnisse

Ergebnisse

Help improve MDN

CSS-Eigenschaft `animation`