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-Kurzschreibweise animation wendet eine Animation zwischen Stilzuständen an. Sie ist eine Kurzschreibweise 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%;
  }
}

Zugehörige Eigenschaften

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

Untereigenschaften, die nur zurückgesetzt werden

Diese Eigenschaft setzt die folgenden CSS-Eigenschaften auf ihre Anfangswerte zurück:

Syntax

css

/* Duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;

/* Duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;

/* Duration | name */
animation: 3s slide-in;

/* Multiple animations */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

Werte

Diese Eigenschaft wird als durch Kommas getrennte Liste von <animation>-Werten angegeben. Jeder Wert besteht aus einer durch Leerzeichen getrennten Liste der folgenden Werte:

<keyframes-name> oder none: Der Name einer @keyframes-At-Regel, die die auf ein Element anzuwendende Animation festlegt. Der Anfangswert für animation-name ist none.
<animation-duration>: Bestimmt, wie lange eine Animation für einen Durchlauf benötigt. Der Wert muss einer der für animation-duration verfügbaren Werte sein. Der Anfangswert ist 0s.
<easing-function>: Bestimmt den Verlauf der Animation. Der Wert muss einer der für animation-timing-function verfügbaren Werte sein. Der Anfangswert ist ease.
<animation-delay>: Bestimmt, wie lange nach dem Anwenden der Animation auf ein Element gewartet wird, bevor die Animation beginnt. Der Wert muss einer der für animation-delay verfügbaren Werte sein. Der Anfangswert ist 0s.
<single-animation-direction>: Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der für animation-direction verfügbaren Werte sein. Der Anfangswert für animation-direction ist normal.
<single-animation-iteration-count>: Die Anzahl der Durchläufe der Animation. Der Wert muss einer der für animation-iteration-count verfügbaren Werte 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 deren Zielelement angewendet werden. Der Wert muss einer der für animation-fill-mode verfügbaren Werte sein. Der Anfangswert für animation-fill-mode ist none.
<single-animation-play-state>: Bestimmt, ob die Animation abgespielt wird. Der Wert muss einer der für animation-play-state verfügbaren Werte sein. Der Anfangswert für animation-play-state ist running.
<single-animation-timeline>: Bestimmt die Timeline, die den Fortschritt der Animation steuert. Der Wert muss einer der für animation-timeline verfügbaren Werte sein. Der Anfangswert ist auto.

Beschreibung

Die Eigenschaft animation wird als eine oder mehrere einzelne Animationen angegeben, die durch Kommas getrennt sind. Jede animation in der durch Kommas getrennten Liste 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. Fehlt eine dieser Komponenten in einer animation-Deklaration, wird sie auf ihren Anfangswert gesetzt.

Hinweis: Die Kurzschreibweise animation setzt die Eigenschaften animation-range-start, animation-range-end und animation-trigger auf ihre jeweiligen Anfangswerte normal, normal und none zurück. Diese Untereigenschaften können in der Kurzschreibweise animation nicht gesetzt werden; werden sie darin angegeben, ist die gesamte Deklaration ungültig. Da die animation-Deklaration jede dieser Eigenschaften auf ihren Anfangswert setzt, müssen sie entweder nach allen animation-Kurzschreibweisen oder mit höherer Spezifität deklariert werden.

animation-name

Die Komponente <animation-name> jeder Animation bezeichnet den Namen der Animation. Sie kann none, ein <custom-ident> oder ein <string> sein. Der Anfangswert von animation-name ist none. Wird in der Kurzschreibweise animation kein Wert für animation-name angegeben, wird daher auf keine der Eigenschaften eine Animation angewendet.

Die Reihenfolge der übrigen Werte innerhalb einer Animationsdefinition ist wichtig, um einen Wert für animation-name von anderen Werten zu unterscheiden. Kann ein Wert in der Kurzschreibweise animation als Wert für eine andere Animationseigenschaft als animation-name interpretiert werden, wird er zuerst dieser Eigenschaft und nicht animation-name zugewiesen. Daher empfiehlt es sich, bei Verwendung der Kurzschreibweise animation den Wert für animation-name als letzten Wert anzugeben. Das gilt auch, wenn Sie mehrere durch Kommas getrennte Animationen mit der Kurzschreibweise animation angeben.

Zeitwerte

Jede Animation kann den Wert <time> null-, ein- oder zweimal enthalten. Die Reihenfolge der Zeitwerte innerhalb einer Animationsdefinition ist wichtig: Der erste Wert, der als <time> interpretiert werden kann, wird animation-duration zugewiesen, der zweite animation-delay.

Wird in der Kurzschreibweise animation kein Wert für animation-duration angegeben, 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 die Kurzschreibweise animation keinen Wert für <animation-timeline> enthält, setzt die Deklaration alle zuvor deklarierten animation-timeline-Werte auf auto zurück. Dadurch wird die Timeline auf die standardmäßige documentTimeline gesetzt.

Wenn ein Wert für <animation-timeline> enthalten ist, der User-Agent solche Werte innerhalb der Kurzschreibweise jedoch nicht unterstützt, ist die gesamte animation-Deklaration ungültig und wird ignoriert. Deklarieren Sie daher beim Erstellen scrollgesteuerter CSS-Animationen die Eigenschaft animation-timeline nach der animation-Kurzschreibweise, damit sie wirksam wird.

Alternativ können Sie <animation-timeline> innerhalb der Kurzschreibweise animation in einem CSS-@supports-Block setzen, zum Beispiel:

css

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

animation-fill-mode und neue Stapelkontexte

Beim forwards-Wert von animation-fill-mode verhalten sich animierte Eigenschaften so, als wären sie im Wert der Eigenschaft will-change enthalten. Wird während der Animation ein neuer Stapelkontext erstellt, behält das Zielelement diesen Stapelkontext nach Abschluss der Animation bei.

Barrierefreiheit

Blinkende und flackernde Animationen können für Menschen mit kognitiven Beeinträchtigungen wie einer Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Bestimmte Bewegungsarten können außerdem vestibuläre Störungen, Epilepsie, Migräne und eine erhöhte Empfindlichkeit bei schwachem Licht auslösen.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen. Verwenden Sie außerdem die @media-Abfrage für reduzierte Bewegung, um eine passende Alternative für Benutzer zu schaffen, die eine Präferenz für weniger Animationen angegeben haben.

Sicherere Webanimationen für Menschen mit Bewegungsempfindlichkeit gestalten auf A List Apart (2015)
Einführung in die Media Query für reduzierte Bewegung auf CSS-Tricks (2017)
Responsives Design für Bewegung auf WebKit (2017)
WCAG verstehen, Richtlinie 2.2 – Ausreichend Zeit: Benutzern ausreichend Zeit geben, Inhalte zu lesen und zu verwenden
WCAG-Erfolgskriterium 2.2.2 verstehen: Pausieren, beenden, ausblenden beim 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: Von der Animation von Eigenschaften des CSS-Boxmodells wird abgeraten, da sie Neuberechnungen des Layouts und erneutes Zeichnen auslöst. Die Animation von Boxmodell-Eigenschaften beansprucht grundsätzlich die CPU stark. Erwägen Sie stattdessen, die Eigenschaft transform zu animieren.

Grundlegende Verwendung: ein Sonnenaufgang

In diesem Beispiel zeigen wir die grundlegende Verwendung der Kurzschreibweise animation, indem wir eine gelbe Sonne vor einem hellblauen Himmel animieren. Die Sonne steigt bis zur Mitte des Viewports auf und sinkt dann aus dem Sichtfeld.

HTML

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

html

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

CSS

Zunächst erstellen wir die Sonne und den Himmel. Der Himmel ist das :root-Element des HTML-Dokuments. Inhalte außerhalb des Viewports – in unserem Fall der Teil der Sonne unterhalb des Horizonts – blenden wir aus, indem wir overflow auf hidden setzen. Mit der Eigenschaft justify-content zentrieren wir die Sonne außerdem im Hintergrund. Wir färben die Sonne gelb, legen ihre height auf die Höhe des Viewports (100vh) fest und setzen ihre Breite gleich ihrer Höhe, indem wir aspect-ratio auf 1 setzen. Mit der Eigenschaft border-radius machen wir aus dem quadratischen <div> 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 Animations-@keyframes, die das Element, auf das sie angewendet werden, nach unten über den Viewport hinausschieben und es anschließend mithilfe von CSS-Transformationen an seine Ausgangsposition zurückbringen:

css

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

Zum Schluss wenden wir die Animation an! Mit der Kurzschreibweise animation wenden wir die Keyframe-Animation sunrise auf das .sun-<div> an. Die Animation wird unendlich oft wiederholt, wobei jeder Durchlauf 4 Sekunden dauert. Die Animationsrichtung wechselt bei jedem Durchlauf:

css

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

Ergebnisse

Mehrere Animationen anwenden

Dieses Beispiel zeigt, wie mehrere Animationen auf ein einzelnes Element angewendet werden. Aufbauend auf dem vorherigen Beispiel mit einer Sonne, die vor einem hellblauen Hintergrund auf- und untergeht, lassen wir die Farben der Sonne nun allmählich durch das gesamte Regenbogenspektrum wechseln. Die zeitlichen Verläufe von Position und Farbe der Sonne sind voneinander 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. Dieser wendet einen filter an, 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 beide Animationen auf unsere Sonne an. Mehrere Animationen werden durch Kommas getrennt; die Parameter jeder Animation werden unabhängig voneinander festgelegt:

css

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

Ergebnisse

Kaskadierung mehrerer Animationen

Dieses Beispiel zeigt, was geschieht, wenn mehrere Animationen Werte für dieselbe Eigenschaft definieren. Es erweitert das Beispiel zur grundlegenden Verwendung um zwei 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 Animation sunrise, und fügen eine zweite Animation namens bounce hinzu. Beide 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 die zuvor deklarierten. In diesem Fall setzt sich der transform-Wert der Animation bounce in der Kaskade durch und überschreibt die von sunrise festgelegte Transformation. Daher bewegt sich die Sonne nur horizontal.

css

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

Ergebnisse

Die Sonne bewegt sich zwischen der linken und der rechten Seite des Viewports hin und her. Sie bleibt im Viewport, obwohl die Animation sunrise definiert ist. Die von sunrise festgelegte Eigenschaft transform wird durch die Animation bounce überschrieben.

Spezifikationen

Spezifikation
CSS Animations Level 1 # animation

Browser-Kompatibilität

Siehe auch

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`