CSS @keyframes-Regel

In CSS kann die @keyframes-Regel verwendet werden, um Animationen zu erstellen. Animationen werden durch schrittweises Ändern von einem CSS-Stil zum anderen erstellt. Während des Animationsprozesses können Sie die Einstellungen des CSS-Stils mehrmals ändern. Die spezifische Änderung erfolgt bei Verwendung von % oder den Schlüsselwörtern "from" und "to", was 0% bis100% identisch sein, 0% ist der Anfang der Animation,100% ist, wenn die Animation abgeschlossen ist. Um die beste Browser-Unterstützung zu erhalten, sollten Sie stets 0% und100% der Selector.

@keyframes Regel ist css3Neue Regel in der Version hinzugefügt, die derzeit von den gängigen Browsern unterstützt wird (mit dem entsprechenden Präfix des Browsers), aber nicht mit IE kompatibel. 9und älteren Browserversionen.

Syntax der Verwendung der @keyframes Regel

Die Syntax dieser Regel ist wie folgt:

@keyframes　animationname　{keyframes-selector　{css-styles;}};

Beschreibung der Attributwerte

animationname：definiert den Namen der Animation；

keyframes-selector：der Prozentsatz der Dauer der Animation，mögliche Werte：0-100%、from (und 0% gleich) 、to (und100%相同)。Sie können einen Animation keyframes-selectors；

css-styles ： eine oder mehrere gültige CSS-Style-Attribute;

Der folgende Beispiel zeigt die tatsächliche Regel des @keyframes.

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

Parameter

Die folgende Tabelle beschreibt die Parameter dieser Regel.

Browserkompatibilität

Die Kompatibilität der @keyframes-Eigenschaft der Browser, die Nummern in der folgenden Tabelle stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Regel.

Weiters Lesen

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS Medienarten.