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 animation-CSS-Kurzform-Eigenschaft 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%;
  }
}

Bestandteile

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

Nur-zurücksetzbare Untereigenschaften

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, wobei jeder Wert eine durch Leerzeichen getrennte Liste der folgenden Werte ist:

<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 die Zeitspanne, die eine Animation benötigt, um einen Zyklus abzuschließen. Der Wert muss einer der in animation-duration verfügbaren Werte sein. Der Anfangswert ist 0s.
<easing-function>: Bestimmt den Typ des Übergangs. Der Wert muss einer der in animation-timing-function verfügbaren Werte sein. Der Anfangswert ist ease.
<animation-delay>: Bestimmt die Wartezeit zwischen dem Anwenden der Animation auf ein Element und dem Beginn der Ausführung der Animation. Der Wert muss einer der in animation-delay verfügbaren Werte sein. Der Anfangswert ist 0s.
<single-animation-direction>: Die Richtung, in der die Animation wiedergegeben wird. Der Wert muss einer der in animation-direction verfügbaren Werte sein. Der Anfangswert 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 Anfangswert 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 Anfangswert für animation-fill-mode ist none.
<single-animation-play-state>: Bestimmt, ob die Animation wiedergegeben wird oder nicht. Der Wert muss einer der in animation-play-state verfügbaren Werte sein. Der Anfangswert 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 Anfangswert ist auto.

Die Eigenschaft animation wird als eine oder mehrere einzelne, durch Kommas getrennte Animationen angegeben. Jede animation innerhalb der durch Kommas getrennten Animationsliste 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 Anfangswert der Komponente gesetzt.

animation-name

Die Komponente <animation-name> jeder Animation ist der Name der Animation. Sie kann none, ein <custom-ident> oder ein <string> sein. Der Anfangswert von animation-name ist none. Das bedeutet, dass keine Animation auf eine der Eigenschaften angewendet wird, wenn in der Kurzform-Eigenschaft animation kein Wert für animation-name 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, einen Wert für animation-name als letzten Wert in einer Werteliste anzugeben, wenn die Kurzform animation verwendet wird. Dies gilt auch dann, wenn Sie mehrere durch Kommas getrennte Animationen mit der Kurzform animation 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 Wert für animation-duration angegeben ist, beträgt die Dauer standardmäßig 0s. In diesem Fall findet die Animation weiterhin statt (die Ereignisse animationStart und animationEnd werden ausgelöst), aber für Benutzende ist keine Animation sichtbar.

animation-timeline

Wenn keine <animation-timeline> in der Kurzform animation enthalten ist, setzt die Kurzformdeklaration alle zuvor deklarierten Werte für animation-timeline 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 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 animation-Kurzform deklarieren, damit sie wirksam wird.

Alternativ kann <animation-timeline> innerhalb der Kurzform animation in einem CSS-@supports-Block festgelegt werden, zum Beispiel:

css

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

animation-fill-mode und neue Stacking-Kontexte

Im Fall des Werts forwards von animation-fill-mode verhalten sich animierte Eigenschaften so, als wären sie in einem festgelegten Wert der Eigenschaft will-change enthalten. Wenn während der Animation ein neuer Stacking-Kontext erstellt wird, behält das Zielelement den Stacking-Kontext 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. Außerdem können bestimmte Arten von Bewegung vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit auslösen.

Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren von Animationen bereitzustellen, und verwenden Sie außerdem die @media-Abfrage für reduzierte Bewegung, um eine ergänzende Erfahrung für Benutzende zu schaffen, die eine Präferenz für weniger animierte Darstellungen angegeben haben.

Sicherere Webanimationen für Bewegungsempfindlichkeit gestalten über A List Apart (2015)
Eine Einführung in die Media Query für reduzierte Bewegung über CSS-Tricks (2017)
Responsives Design für Bewegung über WebKit (2017)
WCAG verstehen, Richtlinie 2.2 — Genügend Zeit: Benutzenden genügend Zeit zum Lesen und Verwenden von Inhalten geben
WCAG-Erfolgskriterium 2.2.2 verstehen: Pausieren, stoppen, ausblenden ü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: Die Animation von Eigenschaften des CSS-Box-Modells wird nicht empfohlen, da sie Layout-Reflows und Neuzeichnungen verursacht. Die Animation jeder Box-Modell-Eigenschaft ist von Natur aus CPU-intensiv; erwägen Sie stattdessen, die Eigenschaft transform zu animieren.

Grundlegende Verwendung: ein Sonnenaufgang

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

HTML

Wir fügen ein einzelnes <div>-Element hinzu, 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. Wir blenden alle Inhalte aus, die sich außerhalb des Viewports befinden – in unserem Fall jeden Teil der Sonne unterhalb des Horizonts –, indem wir overflow auf hidden setzen. Außerdem verwenden wir die Eigenschaft justify-content, um die Sonne im Hintergrund zu zentrieren. Wir färben die Sonne gelb, deklarieren ihre height als 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 es 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 ist auf unendliche Wiederholungen eingestellt, die jeweils 4 Sekunden dauern; die Animationsrichtung wechselt bei 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 vor einem hellblauen Hintergrund auf- und untergeht, drehen wir die Sonne hier schrittweise durch einen Regenbogen von Farben. Das Timing der Position und der Farbe der Sonne ist 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 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

Kaskadierung mehrerer Animationen

Dieses Beispiel demonstriert, was passiert, wenn mehrere Animationen Werte für dieselbe Eigenschaft definieren. Dieses Beispiel erweitert das Beispiel zur grundlegenden Verwendung, 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 Animation sunrise 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 auf dieselbe Eigenschaft anwenden, überschreiben später in der Kaskade deklarierte Animationen zuvor deklarierte Animationen. In diesem Fall „gewinnt“ der Wert transform der Animation bounce die Kaskade und überschreibt die von sunrise festgelegte 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

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`