CSS-animation-Eigenschaft

Definition und Verwendung

animation Die Eigenschaft ist eine Kurzschreibweise, um sechs Animationseigenschaften zu setzen:

Kommentare:Definieren Sie stets: animation-duration Wird die Eigenschaft nicht angegeben, wird die Animation nicht abgespielt, wenn die Dauer 0 beträgt.

Weitere Informationen siehe:

CSS3 Anleitung:CSS Animation

HTML DOM Referenzhandbuch:animation-Eigenschaft

Beispiel

Verwenden Sie die Kurzwahl, um die Animation mit dem div-Element zu verknüpfen:

div
{
animation:mymove 5s infinite;
}

Versuchen Sie es selbst

CSS-Syntax

animation: name duration timing-function delay iteration-count direction;
Wert Beschreibung
animation-name Definiert den Namen des keyframe, der dem Selector zugeordnet werden soll.
animation-duration Definiert die Zeit, die für die Abwicklung der Animation benötigt wird, in Sekunden oder Millisekunden.
animation-timing-function Definiert die Geschwindigkeitskurve der Animation.
animation-delay Definiert die Verzögerung vor dem Start der Animation.
animation-iteration-count Definiert, wie oft die Animation abgespielt werden soll.
animation-direction Definiert, ob die Animation rückwärts in aufeinanderfolgender Reihenfolge abgespielt werden soll.
animation-fill-mode Definiert den Wert, der außerhalb der Ausführungszeit der Animation angewendet wird.
animation-play-state Definiert, ob die Animation läuft oder pausiert.

Technische Details

Standardwert: none 0 ease 0 1 normal
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.animation="mymove 5s infinite"

Browserkompatibilität

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Zahlen mit -webkit-, -moz- oder -o- zeigen die erste Version, die den Präfix verwendet.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-