Wie spiele ich mit CSS-Animationen? (organisieren und teilen)

Dieser Artikel vermittelt Ihnen relevantes Wissen über Animationen in CSS, einschließlich der Frage, was Animation ist, wie man Animationen aufruft und wie man Multi-Keyframe-Animationen implementiert.

1. Was ist Animation? In CSS können Sie @keyframes verwenden, um Animationen zu definieren Ist eine Animation definiert, kann diese über die Animationseigenschaft aufgerufen werden.

Basisattribute der Animation:

Name: der Name der Animation

(anfänglicher Standardwert keiner)

---

Dauer: Animationsdauer

(anfänglicher Standardwert 0 s)

Timing-Funktion: Geschwindigkeitskurve ändern

(anfänglicher Standardwert „ease“) )

Verzögerung: Verzögerungszeit (wie viel Zeit vergeht, bevor die Animation beginnt)
• (anfänglicher Standardwert 0s)
  
iteration-count: Anzahl der Animationsausführungen
• (anfänglicher Standardwert 1, wenn Sie möchten, dass die Animation für immer ausgeführt wird, schreibe unendlich)
  

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}

außer Darüber hinaus gibt es einige Attribute:

animation-direction (legen Sie fest, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll)

normal: Spielen Sie die Animation auf normale Weise ab (anfängliche Standardeinstellung). Wert)

reverse: In umgekehrter Reihenfolge abspielen Animation

alternate: Das 2., 4., 6. Mal... (gerade Zahlen) der Animation automatisch umkehren lassen

alternate-reverse: Lassen Sie die ungeraden Zahlen Zeiten der Animation werden automatisch umgekehrt.

• animation-fill-mode (als Animation festlegen Der Status der Animation, wenn sie nicht abgespielt wird)
• none: Das Standardverhalten der Animation nicht ändern
• 
  forwards: Stoppen Sie die Animation im endgültigen Endzustand.

Rückwärts: Wenden Sie die erste Animation innerhalb des durch Animationsverzögerung festgelegten Zeitraums an. Stile in Schlüsselbildern.

Beide: Befolgen Sie gleichzeitig die Regeln für Vorwärts- und Rückwärtsanimation -Play-State (Legen Sie fest, ob die Animation abgespielt oder angehalten wird)

• paused: Anhalten der Wiedergabe der Animation
• running: normale Wiedergabe der Animation
• 3. Für Animationen, die ausgeführt werden sollen Um mehrere Effekte zu erzielen, können Sie zu diesem Zeitpunkt Multi-Keyframes verwenden.
  
Allgemeine Struktur:

animation:  name | duration | timing function | delay | iteration-count;

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWie spiele ich mit CSS-Animationen? (organisieren und teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!