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.

Die animation-Kurzform der 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 #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slide-in {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

Konstituierende Eigenschaften

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

Eine oder mehrere einzelne <animation>-Deklarationen, getrennt durch Kommas, wobei jede <animation> Folgendes enthält:

<keyframes-name> oder none: Der Name eines @keyframes-Regelsatzes, der spezifiziert, welche Animation auf ein Element angewendet werden soll. Der anfängliche Wert 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 verfügbaren in animation-duration sein. Der anfängliche Wert ist 0s.
<easing-function>: Bestimmt die Art der Übergangsfunktion. Der Wert muss einer der verfügbaren in animation-timing-function sein. Der anfängliche Wert ist ease.
<animation-delay>: Bestimmt die Zeitspanne, die abgewartet wird, bevor die Animation auf ein Element angewendet wird. Der Wert muss einer der verfügbaren in animation-delay sein. Der anfängliche Wert ist 0s.
<single-animation-direction>: Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der verfügbaren in animation-direction sein. Der anfängliche Wert für animation-direction ist normal.
<single-animation-iteration-count>: Die Anzahl der Wiederholungen der Animation. Der Wert muss einer der verfügbaren in animation-iteration-count sein. Der anfängliche Wert für animation-iteration-count ist 1.
<single-animation-fill-mode>: Bestimmt, wie Stile vor und nach der Ausführung der Animation auf das Ziel der Animation angewendet werden. Der Wert muss einer der verfügbaren in animation-fill-mode sein. Der anfängliche Wert für animation-fill-mode ist none.
<single-animation-play-state>: Bestimmt, ob die Animation abgespielt wird oder nicht. Der Wert muss einer der verfügbaren in animation-play-state sein. Der anfängliche Wert für animation-play-state ist running.
<single-animation-timeline>: Bestimmt die Zeitlinie, die zur Steuerung des Fortschritts der Animation verwendet wird. Der Wert muss einer der verfügbaren in animation-timeline sein. Der anfängliche Wert ist auto.

Die animation-Eigenschaft wird als eine oder mehrere einzelne Animationen angegeben, getrennt durch Kommas. Jede animation innerhalb der durch Kommas getrennten Liste von Animationen legt die Werte von animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state und animation-timeline fest. Wenn einer der Komponenten in einer animation-Deklaration nicht enthalten ist, wird der Wert der Komponente auf den Anfangswert der Komponente gesetzt.

animation-name

Die <animation-name>-Komponente jeder Animation ist der Name der Animation, der none, ein <custom-ident> oder ein <string> sein kann. Der anfängliche Wert von animation-name ist none, was bedeutet, dass wenn kein animation-name-Wert in der animation-Kurzformeigenschaft deklariert ist, keine Animation auf irgendeine der Eigenschaften angewendet wird.

Die Reihenfolge der anderen Werte innerhalb einer Animationsdefinition ist wichtig, um einen animation-name-Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation-Kurzform als ein Wert für eine andere Animationseigenschaft als animation-name geparst werden kann, wird der Wert zuerst auf diese Eigenschaft angewendet und nicht auf animation-name. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Liste von Werten bei Verwendung der animation-Kurzform anzugeben; dies gilt auch, wenn Sie mehrere, durch Kommas getrennte Animationen mit der animation-Kurzform 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 der animation-duration zugewiesen, und der zweite wird der animation-delay zugewiesen.

Wenn kein animation-duration-Wert in der animation-Kurzform-Eigenschaft angegeben ist, beträgt die Dauer standardmäßig 0s. In diesem Fall findet die Animation dennoch statt (die animationStart und animationEnd Events werden ausgelöst), aber es wird dem Benutzer keine Animation sichtbar sein.

animation-timeline

Die aktuellen Implementierungen von animation sind nur zum Zurücksetzen: Wenn kein <animation-timeline> in der animation-Kurzform enthalten ist, wird die Kurzform-Deklaration alle zuvor deklarierten animation-timeline-Werte auf auto zurücksetzen.

Standardmäßig ist die animation-timeline die documentTimeline. Wenn ein Wert enthalten ist, aber der Benutzeragent <animation-timeline>-Werte innerhalb der Kurzform nicht unterstützt, ist die Deklaration ungültig und wird ignoriert.

Dies bedeutet, dass Sie beim Erstellen von CSS-Scroll-gesteuerten Animationen die animation-timeline Eigenschaft nach jeder animation-Kurzform-Deklaration angeben müssen, damit sie wirksam wird.

Alternativ kann die animation-timeline innerhalb der animation-Kurzform in einem CSS @supports-Block verwendet werden, zum Beispiel:

css

@supports (animation: view()) {
  /* CSS for browsers that support setting <animation-timeline> within the animation shorthand */
}

animation-fill-mode und neue Stacking-Kontexte

Im Falle des animation-fill-mode forwards Wertes verhalten sich animierte Eigenschaften so, als wären sie in einem Wert der Eigenschaft will-change enthalten. Wenn während der Animation ein neuer Stacking-Kontext erstellt wird, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation abgeschlossen ist.

Barrierefreiheit

Blinkende und flimmernde Animationen können problematisch für Personen mit kognitiven Problemen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Darüber hinaus können bestimmte Arten von Bewegungen Auslöser für Vestibuläre Störungen, Epilepsie, Migräne und Scotopic Sensitivity sein.

Erwägen Sie, eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitzustellen, sowie die Verwendung von Reduced Motion Media Query, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationserlebnisse angegeben 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> = 
  <'animation-duration'>              ||
  <easing-function>                   ||
  <'animation-delay'>                 ||
  <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> = 
  <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 CSS-Box-Modell-Eigenschaften wird nicht empfohlen. Die Animation einer Box-Modell-Eigenschaft ist an sich rechnerintensiv; 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 sinkt dann außer Sicht.

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

Ergänzend zur Sonnenanimation im 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 ändert sich zu einem leuchtenden 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 untergeht. Die Sonne dreht sich allmählich durch ein Regenbogenspektrum von Farben. Der Zeitablauf 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);
  }
}

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

Spezifikation
CSS Animations Level 1 # animation

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Animationen
JavaScript-API AnimationEvent

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