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

Diese Eigenschaft wird als kommagetrennte 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 Zeitdauer, die eine Animation benötigt, um einen Zyklus abzuschließen. Der Wert muss einer der für animation-duration verfügbaren Werte sein. Der Anfangswert ist 0s.
<easing-function>: Bestimmt die Art des Übergangs. Der Wert muss einer der für animation-timing-function verfügbaren Werte sein. Der Anfangswert ist ease.
<animation-delay>: Bestimmt die Wartezeit nach dem Anwenden der Animation auf ein Element, bevor die Animation ausgeführt wird. 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 Wiedergaben 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 auf das Ziel der Animation angewendet werden sollen. 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 oder nicht. 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 zur Steuerung des Fortschritts der Animation verwendet wird. 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, durch Kommas getrennte Animationen angegeben. Jede animation in der kommagetrennten 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 Anfangswert der Komponente gesetzt.

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 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 Animationseigenschaft außer 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 kommagetrennte Animationen 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 in der Kurzform-Eigenschaft animation kein animation-duration-Wert angegeben wird, lautet die Dauer standardmäßig 0s. In diesem Fall findet die Animation dennoch statt (die Ereignisse animationStart und animationEnd werden ausgelöst), aber für Benutzer ist 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, 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 einer beliebigen 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 von animation-fill-mode verhalten sich animierte Eigenschaften so, als wären sie in einem festgelegten 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 einer Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegung Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

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 Benutzern, die eine Präferenz für reduzierte Animationen angegeben haben, eine ergänzende Erfahrung zu bieten.

Sicherere Webanimationen für Bewegungsempfindlichkeit gestalten via A List Apart (2015)
Eine Einführung in die Media Query für reduzierte Bewegung via CSS-Tricks (2017)
Responsives Design für Bewegung via WebKit (2017)
WCAG verstehen, Leitlinie 2.2 — Ausreichend Zeit: Geben Sie Benutzern ausreichend Zeit, Inhalte zu lesen und zu verwenden
WCAG-Erfolgskriterium 2.2.2 verstehen: Anhalten, stoppen, ausblenden via 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 Layout-Reflows und Neuzeichnungen verursacht. Die Animation jeder Boxmodelleigenschaft 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 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 verwenden ein einzelnes <div>-Element, um unsere Sonne darzustellen.

html

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

CSS

Wir beginnen mit der Erstellung von Sonne und Himmel. Der Himmel ist das :root des HTML-Dokuments. Wir blenden sämtlichen Inhalt aus, der sich außerhalb des Viewports befindet – 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 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 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 @keyframes für die Animation, die das Element, auf das sie angewendet werden, über den Viewport hinaus nach unten verschieben und es anschließend 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 <div> .sun anzuwenden. Die Animation wird für unendliche Iterationen wiedergegeben, von denen jede 4 Sekunden dauert; die Animationsrichtung wechselt mit jeder Iteration:

css

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

Ergebnisse

Mehrere Animationen anwenden

Dieses Beispiel zeigt 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 drehen. 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

Mehrere Animationen in der Kaskade

Dieses Beispiel zeigt, 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 setzen.

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