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 Kurzform-Eigenschaft animation von CSS 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:

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 angibt. 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 in animation-duration verfügbaren Werte sein. Der Anfangswert ist 0s.
<easing-function>: Bestimmt die Art des Übergangs. Der Wert muss einer der in animation-timing-function verfügbaren Werte sein. Der Anfangswert ist ease.
<animation-delay>: Bestimmt die Wartezeit ab dem Anwenden der Animation auf ein Element, bevor die Animation ausgeführt wird. 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 abgespielt 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 abgespielt 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, mit der der Fortschritt der Animation gesteuert wird. Der Wert muss einer der in animation-timeline verfügbaren Werte sein. Der Anfangswert ist auto.

Beschreibung

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 ihr Wert auf den Anfangswert der Komponente gesetzt.

Die Komponente <animation-name> jeder Animation ist der Name der Animation. Dieser kann none, ein <custom-ident> oder ein <string> sein. Der Anfangswert von animation-name ist none, was 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. Aus diesem Grund wird empfohlen, beim Verwenden 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, einen 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 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), aber für Benutzende ist keine Animation sichtbar.

animation-timeline

Wenn in der Kurzform animation kein <animation-timeline> enthalten ist, setzt die Kurzform-Deklaration alle zuvor deklarierten animation-timeline-Werte auf auto zurück, wodurch die Timeline auf die standardmäßige documentTimeline gesetzt wird.

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 jeder zugehörigen Kurzform animation 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

Im Fall des Werts forwards für 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 Einschränkungen wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Bewegungsarten Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

Ziehen Sie in Betracht, 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 Inhalte 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 — Ausreichend Zeit: Benutzenden genügend Zeit geben, Inhalte zu lesen und zu verwenden
WCAG-Erfolgskriterium 2.2.2 verstehen: Anhalten, 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: Von der Animation von Eigenschaften des CSS-Box-Modells wird abgeraten, da sie Layout-Reflows und Neuzeichnungen verursacht. Die Animation jeder Box-Model-Eigenschaft ist von Natur aus CPU-intensiv; ziehen Sie stattdessen die Animation der Eigenschaft transform in Betracht.

Grundlegende Verwendung: ein Sonnenaufgang

In diesem Beispiel demonstrieren wir die grundlegende Verwendung der Kurzform animatation, indem wir eine gelbe Sonne über einen hellblauen Himmel animieren. Die Sonne steigt in die Mitte des Viewports und fällt dann außer Sichtweite.

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. Wir blenden alle Inhalte aus, die sich außerhalb des Viewports befinden – in unserem Fall alle Teile 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 machen 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 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 einige Animationen mit @keyframes, die das Element, auf das sie angewendet werden, über den Viewport hinaus nach unten verschieben und das Element dann mithilfe von CSS-Transformationen in 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 .sun-<div> anzuwenden. Die Animation wird mit unendlichen Wiederholungen abgespielt, wobei jede 4 Sekunden dauert; die Animationsrichtung wechselt bei jeder Wiederholung:

css

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

Ergebnisse

Mehrere Animationen anwenden

Dieses Beispiel demonstriert die Anwendung mehrerer Animationen auf ein einzelnes Element. Aufbauend auf dem vorherigen Beispiel mit einer Sonne, die vor einem hellblauen Hintergrund auf- und untergeht, werden wir die Sonne hier schrittweise durch einen Regenbogen von Farben rotieren lassen. 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 rotiert:

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 zeigt, was passiert, wenn mehrere Animationen Werte für dieselbe Eigenschaft definieren. Dieses Beispiel erweitert das Beispiel zur grundlegenden Verwendung, wobei 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 transform-Wert der Animation bounce in der 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 transform-Eigenschaft 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`