Dies sind CSS3-Regeln, die vom Webkit-Entwicklungsteam im Vorfeld der formellen Annahme als Teil der CSS3-Spezifikation definiert wurden - daher die Aufnahme von -webkit in den Selektor. Das @ zeigt an, dass es sich um eine CSS-Regel und nicht um einen Standardselektor handelt. @ -webkit-keyframes dient zum Festlegen von Keyframes für visuelle CSS-Animationseigenschaften.
Sie können für die Animation so viele Keyframes definieren, wie Sie möchten. falls Sie nur den endgültigen Keyframe angegeben haben (wenn 100% der Animation abgeschlossen sind). Die vollständige Syntax und Dokumentation für diese Regeln finden Sie hier.
Wenn Sie beispielsweise möchten, dass die Animation langsam beginnt und dann beschleunigt, während Sie glatt beginnen und enden, können Sie Zwischen-Keyframes mit nichtlinearen Schritten im Grad der Drehung festlegen:
%Vor%Das "@" deklariert eine At-Rule im Stylesheet. Es hat in jedem Fall eine besondere Bedeutung.
Der Wert "100%" bezieht sich auf den Endzustand der CSS-Animation, die durch die @ keyframes-Regel oder in diesem Fall durch die @ -webkit-keyframes-Regel definiert wird. Sie müssen tatsächlich den ersten (0%) und den letzten (100%) Status der Animation deklarieren, damit der Benutzeragent weiß, wann er die Animation starten und stoppen soll.
Hier ist noch etwas: At-Rules sind Anweisungen an die Rendering-Engine; Sie erweitern die CSS-Rule-Set-Syntax über normale Selector- und Deklarationsblöcke hinaus. At-Rules werden mit einem At-Keyword deklariert, das einfach "@keyword" ist, gefolgt von einer At-Rules-Anweisung, die sich auf das verwendete At-Keyword bezieht. Beispiel: @charset "ISO-8859-15";
Auf das At-Schlüsselwort können optionale Argumente folgen, abhängig vom Typ der Statements. Beispiel: @media screen {color: # 000; }, wobei Bildschirm das optionale Argument ist.