css keyframes ist eine CSS3-Regel, mit der das Verhalten eines Zyklus von CSS-Animationen definiert und einfache Animationen erstellt werden können. Die Keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einer Kennung, die den Animationsnamen angibt .
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS3, Thinkpad T480-Computer.
Empfohlen: „CSS-Video-Tutorial“
Was ist CSS @keyframes? Was ist der Nutzen?
@keyframes ist eine CSS3-Regel, mit der das Verhalten eines Zeitraums von CSS-Animationen definiert und einfache Animationen erstellt werden können.
Animationen ähneln Übergängen darin, dass sie Darstellungen sich ändernder CSS-Eigenschaften im Laufe der Zeit darstellen. Der Hauptunterschied besteht darin, dass der Übergang implizit ausgelöst wird, wenn sich der Eigenschaftswert ändert (z. B. wenn sich der Eigenschaftswert beim Schweben ändert), die Animation jedoch explizit ausgeführt wird, wenn die animierte Eigenschaft angewendet wird. Daher müssen Animationen explizite Werte für animierte Eigenschaften anzeigen. Diese Werte werden durch die in der @keyframes-Regel angegebenen Animations-Keyframes definiert. Daher besteht die @keyframes-Regel aus einer Reihe gekapselter CSS-Stilregeln, die beschreiben, wie sich Eigenschaftswerte im Laufe der Zeit ändern.
Mithilfe verschiedener CSS-Animationseigenschaften können Sie dann viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Iterationen der Animation, ob zwischen Start- und Endwerten gewechselt wird und ob die Animation ausgeführt oder angehalten werden soll. Animationen können auch ihre Startzeit verzögern.
Eine @keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einem Bezeichner, der den Namen der Animation angibt (auf den mit „animation-name“ verwiesen wird), gefolgt von einer Reihe von Stilregeln (getrennt durch geschweifte Klammern). Die Animation wird dann auf das Element angewendet, indem der Bezeichner als Wert des Attributs „animation-name“ verwendet wird.
CSS @KeyFrames Nutzungsbeispiele:
1
Im obigen Beispiel sind der Animation mit dem Namen „bounce“ fünf Keyframes zugeordnet. Verwenden Sie zwischen dem ersten und zweiten Keyframe (d. h. zwischen „0 %“ und „25 %“) die Ease-Out-Timing-Funktion. Verwenden Sie zwischen dem zweiten und dritten Keyframe (d. h. zwischen „25 %“ und „50 %“) die Easy-In-Timing-Funktion usw. Der Effekt tritt auf, wenn sich das Element um 50 Pixel nach oben bewegt. Es verlangsamt sich, wenn es seinen höchsten Punkt erreicht, und beschleunigt sich dann, wenn es wieder auf 150 Pixel zurückfällt. Die zweite Hälfte der Animation funktioniert auf ähnliche Weise, verschiebt das Element jedoch nur um 25 Pixel nach oben. Diese Animation erzeugt einen Hüpfeffekt, der zur Simulation einer springenden Ballanimation verwendet werden kann.
Hinweis:
@keyframes-Regeln kaskadieren nicht; Animationen leiten daher niemals Keyframes von mehreren @keyframes-Regeln ab.
Um den Keyframe-Satz zu bestimmen, müssen alle Werte im Selektor nach aufsteigender Zeit sortiert werden. Wenn es Duplikate gibt (z. B. wenn wir zwei „50 %“-Keyframe-Regeln und einen Deklarationsblock geschrieben haben), legt die @keyframes-Regel fest, dass der letzte Keyframe verwendet wird, um Keyframe-Informationen für diesen Zeitraum bereitzustellen. @keyframes Wenn mehrere Keyframes denselben Keyframe-Auswahlwert angeben, gibt es in der Regel keine Kaskadierung.
Das obige ist der detaillierte Inhalt vonWas sind CSS-Keyframes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
