CSS-Referenzhandbuch

CSS @Regeln (RULES)

Vollständiges Verzeichnis der CSS-Eigenschaften

CSS3 Animation-delay Eigenschaft CSS3 ausrichten-self Eigenschaft

CSS3 Verwendung und Beispiel des animation-Attributs

Die animation CSS-Eigenschaft ist eine Kürzelüberschrift der folgenden AttributeAnimation-Name,Animation-Dauer,Animation-Zeitplan-Funktion,Animation-Verzögerung,Animation-Iteration-Zähler,Animation-Richtung,Animation-füllen-ModusundAnimation-spielen-Zustand.

Die folgende Tabelle zusammenfasst die Anwendungskontexte und Versionshistorie dieses Attributs.

Standardwert：	none 0 ease 0 1 normal none running;
Geeignet für：	Alle Elemente::before und::after Pseudo-Element
Vererbung：	Keine
Animierbar:	Nein.Siehe auch Animationseigenschaft.
Version：	CSS3neue Funktion
JavaScript-Syntax:	object.style.animation="mymove 5s infinite"

Verwendungssyntax der animation

Die Syntax dieses Attributs ist wie folgt:

animation:　[　name　duration　timing-function　delay　iteration-count　direction　fill-mode　play-state　]　|　initial　|　inherit

Das folgende Beispiel zeigt, wie man den animation-Attribut verwendet.

Beispiel

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　rot;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation:　moveit　2s　linear　0s　unendlich　alternierend;
　　　　
　　　　animation:　moveit　2s　linear　0s　unendlich　alternierend;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Testen Sie es heraus‹/›

Hinweis:Es müssen mindestens zwei animation-Eigenschaften angegeben werden.-name und animation-Dauer (größer als 0), um die Animation zu verursachen.

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
Animation-Name	Bestimmen Sie den Namen der @keyframes-Definition der Animation, die auf das ausgewählte Element angewendet werden soll.
Animation-Dauer	Bestimmen Sie die Anzahl der Sekunden oder Millisekunden, die eine Animation benötigt, um einen Animationszyklus abzuschließen.
Animation-Zeitplan-Funktion	Bestimmen Sie, wie die Animation während der Dauer jeder Periode ausgeführt wird, d.h. die Easing-Funktion.
Animation-Verzögerung	Bestimmen Sie die Verzögerung vor dem Start der Animation.
Animation-Iteration-Zähler	Bestimmen Sie, wie oft die Animation vor dem Stoppen abgespielt werden soll.
Animation-Richtung	Bestimmen Sie, ob die Animation im Wechselzyklus umgekehrt abgespielt werden soll.
Animation-füllen-Modus	Bestimmen Sie, wie der Stil vor und nach der Ausführung der CSS-Animation auf das Ziel angewendet werden soll.
Animation-spielen-Zustand	Bestimmen Sie, ob die Animation ausgeführt oder pausiert wird.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird der berechnete Wert der animation-Eigenschaft des übergeordneten Elements verwendet.

Browserkompatibilität

Kompatibilität der animation-Eigenschaft der Browser, alle gängigen Browser unterstützen diese Eigenschaft. Die Zahl gibt die erste Browser-Version an, die die Eigenschaft unterstützt.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3Animation.

Zusammenhängende Eigenschaften und Regeln:Animation-Name,Animation-Dauer,Animation-Zeitplan-Funktion,Animation-Verzögerung,Animation-Iteration-Zähler,Animation-Richtung,Animation-füllen-Modus,Animation-spielen-Zustand,@keyframes.

CSS3 Animation-delay Eigenschaft CSS3 ausrichten-self Eigenschaft