animation

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

Die animation Shorthand CSS Eigenschaft wendet eine Animation zwischen Stilen an. Es 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 #333;
  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;

Die animation Eigenschaft wird als eine oder mehrere einzelne Animationen angegeben, die durch Kommas getrennt sind.

Jede einzelne Animation wird angegeben als:

null, ein oder zwei Vorkommen des <time> Wertes
null oder ein Vorkommen der folgenden Werte:
ein optionaler Name für die Animation, der none, ein <custom-ident> oder ein <string> sein kann

Note: animation-timeline, animation-range-start und animation-range-end sind derzeit nicht in dieser Liste enthalten, da aktuelle Implementierungen nur zum Zurücksetzen dienen. Das bedeutet, dass die Einbeziehung von animation einen zuvor deklarierten animation-timeline Wert auf auto und zuvor deklarierte animation-range-start und animation-range-end Werte auf normal zurücksetzt, aber diese Eigenschaften können nicht über animation festgelegt werden. Beim Erstellen von CSS scroll-gesteuerten Animationen müssen Sie diese Eigenschaften nach der Deklaration einer animation Kurzanweisung angeben, damit sie wirksam wird.

Werte

<single-easing-function>: Bestimmt die Art des Übergangs. Der Wert muss einer der im <easing-function> verfügbaren sein.
<single-animation-iteration-count>: Die Anzahl der Wiederholungen der Animation. Der Wert muss einer der im animation-iteration-count verfügbaren sein.
<single-animation-direction>: Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der im animation-direction verfügbaren sein.
<single-animation-fill-mode>: Bestimmt, wie Stile auf das Ziel der Animation vor und nach ihrer Ausführung angewendet werden sollen. Der Wert muss einer der im animation-fill-mode verfügbaren sein.
<single-animation-play-state>: Bestimmt, ob die Animation abgespielt wird oder nicht. Der Wert muss einer der im animation-play-state verfügbaren sein.

Die Reihenfolge der Zeitwerte innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert, der als <time> geparst werden kann, wird der animation-duration zugewiesen, und der zweite wird der animation-delay zugewiesen.

Die Reihenfolge anderer Werte innerhalb jeder Animationsdefinition ist ebenfalls wichtig, um einen animation-name Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation Kurzform als Wert für eine Animations-Eigenschaft außer animation-name geparst werden kann, wird der Wert zunächst auf diese Eigenschaft angewendet und nicht auf animation-name. Aus diesem Grund ist es eine empfohlene Praxis, einen Wert für animation-name als letzten Wert in einer Liste von Werten anzugeben, wenn die animation Kurzform verwendet wird; das gilt auch, wenn Sie mehrere, durch Kommas getrennte Animationen mit der animation Kurzform angeben.

Obwohl ein Animationsname gesetzt werden muss, damit eine Animation angewendet wird, sind alle Werte der animation Kurzform optional und standardmäßig auf den Anfangswert für jede langformige animation Komponente festgelegt. Der Anfangswert von animation-name ist none, das heißt, wenn kein animation-name Wert in der animation Kurzform-Eigenschaft deklariert wird, gibt es keine Animation, die auf eine der Eigenschaften angewendet wird.

Wenn der animation-duration Wert aus der animation Kurzform-Eigenschaft weggelassen wird, ist der Standardwert dafür 0s. In diesem Fall wird die Animation trotzdem ablaufen (die animationStart und animationEnd Ereignisse werden ausgelöst), jedoch wird keine Animation sichtbar sein.

Im Falle des animation-fill-mode forwards Wertes verhalten sich animierte Eigenschaften so, als ob sie in einem Satz von will-change Eigenschaftswerten enthalten wären. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Zielelement den Stapelkontext bei, nachdem die Animation beendet ist.

Barrierefreiheit

Blinken und Flackern in Animationen können problematisch für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Zusätzlich können bestimmte Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie und Migräne sowie skotopische Empfindlichkeit sein.

Überlegen Sie, eine Möglichkeit zum Pausieren oder Deaktivieren der Animation bereitzustellen, sowie die Reduced Motion Media Query zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationen geäußert haben.

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> = 
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

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

<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()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

Beispiele

Hinweis: Die Animation von CSS Box Model Eigenschaften wird nicht empfohlen. Die Animation von Box-Modell-Eigenschaften ist von Natur aus CPU-intensiv; erwägen Sie stattdessen, die transform Eigenschaft zu animieren.

Sonnenaufgang

Hier animieren wir eine gelbe Sonne über einen hellblauen Himmel. Die Sonne steigt zum Mittelpunkt des Viewports und fällt dann aus dem Blickfeld.

html

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

css

:root {
  overflow: hidden; /* hides any part of the sun below the horizon */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centers the sun in the background */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

Mehrere Eigenschaften animieren

Erweitern wir die Sonnen-Animation aus dem vorherigen Beispiel, fügen wir eine zweite Animation hinzu, die die Farbe der Sonne beim Auf- und Untergang ändert. Die Sonne beginnt dunkelrot, wenn sie unter dem Horizont ist, und wechselt zu einem hellen Orange, wenn sie den oberen Punkt erreicht.

html

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

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* it is possible to animate multiple properties in a single animation */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* unset properties i.e. 'filter' will revert to default values */
  }
}

Mehrfachanimationen anwenden

Hier ist eine Sonne, die auf einem hellblauen Hintergrund auf- und untergeht. Die Sonne dreht sich langsam durch ein Spektrum von Farben. Das Timing der Position und Farbe der Sonne sind unabhängig.

html

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

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* multiple animations are separated by commas, each animation's parameters are set independently */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

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

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

Kaskadierung mehrerer Animationen

Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne hüpft zwischen den linken und rechten Seiten des Viewports hin und her. Die Sonne bleibt im Viewport, obwohl eine Aufstiegsanimation definiert ist. Die Transform-Eigenschaft der Aufstiegsanimation wird von der Hüpfanimation 'überschrieben'.

html

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

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    animations declared later in the cascade will override the
    properties of previously declared animations
  */
  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

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

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

Siehe Verwendung von CSS-Animationen für zusätzliche Beispiele.

Spezifikationen

Specification
CSS Animations Level 1 # animation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Verwendung von CSS-Animationen
JavaScript AnimationEvent API