CSS-animation-direction-Eigenschaft

Definition und Verwendung

animation-direction Definiert, ob die Animation im Wechsel in die entgegengesetzte Richtung abgespielt werden soll.

Wenn der Wert von animation-direction "alternateFalls "alternate" verwendet wird, wird die Animation bei ungeraden Malen (1, 3, 5 usw.) normal abgespielt und bei geraden Malen (2, 4, 6 usw.) rückwärts abgespielt.

Anmerkung:Wenn die Animation auf nur ein Mal abgespielt wird, hat diese Eigenschaft keine Wirkung.

Siehe auch:

CSS3-Tutorial:CSS Animation

HTML DOM Referenzhandbuch:animationDirection-Eigenschaft

Beispiel

Animation pausieren:

div {
  animation-direction: alternate;
}

Probieren Sie es selbst aus

CSS-Syntax

animation-direction: normal|alternate;
Wert Beschreibung Test
normal Standardwert. Die Animation sollte normal abgespielt werden. Test
alternate Die Animation sollte im Wechsel in die entgegengesetzte Richtung abgespielt werden. Test

Technische Details

Standardwert: normal
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.animationDirection="alternate"

Browser-Unterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Zahlen, die mit -webkit-, -moz- oder -o- versehen sind, stellen die erste Version dar, die den Präfix verwendet.

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