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. Sie ist ein Shorthand 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 slidein;

animation: 3s linear 1s infinite running slidein;

animation: 3s linear 1s infinite alternate slidein;

animation: 0.5s linear 1s infinite alternate slidein;

<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 slidein {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

Bestandeigenschaften

Diese Eigenschaft ist ein Shorthand 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, getrennt durch Kommata.

Jede einzelne Animation wird wie folgt angegeben:

Null, eine 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 zurückgesetzt werden können. Dies bedeutet, dass das Einfügen der animation eine zuvor deklarierte animation-timeline auf auto zurücksetzt und zuvor deklarierte animation-range-start und animation-range-end Werte auf normal setzt, aber diese Eigenschaften können nicht über animation gesetzt werden. Beim Erstellen von CSS scroll-driven animations müssen Sie diese Eigenschaften nach der Deklaration einer animation-Shorthand-Eigenschaft definieren, damit sie wirksam werden.

Werte

<single-easing-function>: Bestimmt den Typ des Übergangs. Der Wert muss einer der in <easing-function> verfügbaren sein.
<single-animation-iteration-count>: Die Anzahl der Wiederholungen der Animation. Der Wert muss einer der in animation-iteration-count verfügbaren sein.
<single-animation-direction>: Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der in 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 in animation-fill-mode verfügbaren sein.
<single-animation-play-state>: Bestimmt, ob die Animation abgespielt wird oder nicht. Der Wert muss einer der in animation-play-state verfügbaren sein.

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

Die Reihenfolge der anderen Werte innerhalb jeder Animationsdefinition ist ebenfalls wichtig, um einen animation-name Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation-Shorthand-Eigenschaft als Wert für eine andere Animations-Eigenschaft als animation-name analysiert werden kann, wird der Wert zuerst dieser Eigenschaft zugewiesen und nicht animation-name. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Liste von Werten anzugeben, wenn die animation-Shorthand-Eigenschaft verwendet wird; dies gilt auch, wenn Sie mehrere, durch Kommata getrennte Animationen mit der animation-Shorthand-Eigenschaft angeben.

Obwohl ein Animationsname gesetzt werden muss, damit eine Animation angewendet wird, sind alle Werte der animation-Shorthand-Eigenschaft optional und standardmäßig auf den Anfangswert für jede langfristige animation Komponente eingestellt. Der Anfangswert von animation-name ist none, was bedeutet, dass, wenn kein animation-name Wert in der animation-Shorthand-Eigenschaft deklariert ist, keine Animation auf irgendwelche der Eigenschaften angewendet wird.

Wenn der animation-duration Wert in der animation-Shorthand-Eigenschaft ausgelassen wird, ist der Standardwert für diese Eigenschaft 0s. In diesem Fall wird die Animation dennoch stattfinden (die Ereignisse animationStart und animationEnd werden ausgelöst), aber es wird keine Animation sichtbar sein.

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

Barrierefreiheit

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Darüber hinaus können bestimmte Arten von Bewegungen ein 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 die Reduced Motion Media Query zu verwenden, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die einen reduzierten Animationsgrad bevorzugen.

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: Das Animieren von CSS Box Model Eigenschaften wird nicht empfohlen. Das Animieren einer Box-Model-Eigenschaft ist von Natur aus CPU-intensiv; erwägen Sie stattdessen die Animation der transform Eigenschaft.

Sonnenaufgang

Hier animieren wir eine gelbe Sonne über einen hellblauen Himmel. Die Sonne steigt zum Zentrum des Ansichtsfensters auf und fällt dann aus dem Sichtfeld.

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

Anknüpfend an die Sonnenanimation im vorherigen Beispiel, fügen wir eine zweite Animation hinzu, die die Farbe der Sonne ändert, während sie auf- und untergeht. Die Sonne beginnt dunkelrot, wenn sie unter dem Horizont ist, und wechselt zu einem hellen Orange, wenn sie die Spitze 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 */
  }
}

Mehrere Animationen anwenden

Hier ist eine Sonne, die auf einem hellblauen Hintergrund auf- und abgeht. Die Sonne dreht sich allmählich durch ein Regenbogenspektrum an Farben. Das Timing der Position und Farbe der Sonne sind unabhängig voneinander.

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);
  }
}

Mehrere Animationen kaskadieren

Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne springt zwischen den linken und rechten Seiten des Ansichtsfensters. Die Sonne bleibt im Ansichtsfenster, obwohl eine Aufstiegsanimation definiert ist. Die Transformations-Eigenschaft der Aufstiegsanimation wird von der Sprunganimation "ü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