8 Eigenschaften der CSS3-Animation (Animation), die Sie beherrschen müssen

Animationsverbundattribut. Ruft die auf das Objekt angewendeten Animationseffekte ab oder legt diese fest.

Wenn mehrere Attributwerte durch "," getrennt sind, gilt dies für alle Elemente, einschließlich der Pseudoobjekte :after und :before

1.animation-name Den auf das Objekt angewendeten Animationsnamen abrufen oder festlegen

Muss in Verbindung verwendet werden mit der Regel @keyframes, zB:@keyframes Animationen Animationsname:Animationen;

2.animation-duration Dauer der Objektanimation abrufen oder festlegen

animation- Dauer: 3s; Animation abgeschlossen Die verwendete Zeit beträgt 3s

3. Animations-Timing-Funktion Abrufen oder Festlegen des Übergangstyps der Objektanimation

linear: linearer Übergang. Entspricht der Bezier-Kurve (0,0, 0,0, 1,0, 1,0)

Leichtigkeit: sanfter Übergang. Entspricht der Bézier-Kurve (0,25, 0,1, 0,25, 1,0)

Ease-in: von langsam nach schnell. Entspricht der Bezier-Kurve (0,42, 0, 1,0, 1,0)

Easeout: von schnell nach langsam. Entspricht der Bezier-Kurve (0, 0, 0,58, 1,0)

Ease-in-out: von langsam nach schnell und dann nach langsam. Entspricht der Bezier-Kurve (0,42, 0, 0,58, 1,0)

Schrittanfang: Entspricht Schritten (1, Start)

Schrittende: Entspricht Schritten (1, Ende)

steps(<integer>[, [ start | end ] ]?): Eine Schrittfunktion, die zwei Parameter akzeptiert. Der erste Parameter muss eine positive ganze Zahl sein, die die Anzahl der Schritte der Funktion angibt. Der Wert des zweiten Parameters kann start oder end sein und gibt den Zeitpunkt an, zu dem sich der Wert jedes Schritts ändert. Der zweite Parameter ist optional und der Standardwert ist end.

kubisch-bezier(, , , ): Ein bestimmter Bezier-Kurventyp, die 4 Werte müssen im Bereich [0, 1 liegen ] Intervall Innerhalb von

4.animation-delay Rufen Sie die Objektanimationsverzögerungszeit ab oder legen Sie sie fest

animation-delay:0.5s; Die Verzögerungszeit vor dem Start der Animation beträgt 0,5 s

5.animation-iteration-count Ruft die Schleife Zeiten der Objektanimation

ab oder legt sie fest

animation -iteration-count: unendlich |.

unendlich: Endlosschleife

zahl: Anzahl der Schleifen

6.animation-direction Abrufen oder Legen Sie fest, ob die Objektanimation in der Schleife in die entgegengesetzte Richtung bewegt werden soll

normal: normale Richtung

umgekehrt: in umgekehrter Richtung ausführen

alternativ: Animation läuft normal und dann in die entgegengesetzte Richtung und abwechselnd weiterlaufen

abwechselnd-rückwärts: Die Animation läuft zuerst in die Rückwärtsrichtung und dann in die Vorwärtsrichtung und läuft abwechselnd weiter

7. animation-play-state Rufen Sie den Status der Objektanimation ab oder legen Sie ihn fest

animation-play-state:running |

running:motion

paused: pausiert

animation-play-state:paused; Wenn die Maus vorbeigeht, stoppt die Animation und wenn die Maus wegbewegt wird, läuft sie weiter

8. animation-fill-mode Status außerhalb der Objektanimationszeit abrufen oder festlegen

keine: Standardwert, Status des Objekts außerhalb der Animation nicht festlegen

vorwärts: festgelegt den Objektzustand auf den Zustand am Ende der Animation

rückwärts: setzt den Objektzustand auf den Zustand am Anfang der Animation

beides: Setzt den Objektzustand auf den Zustand, wenn die Animation beginnt oder endet

[Verwandte Empfehlungen]

1.

Einführung in das Animationsrichtungsattribut in CSS3 im Detail

2.

Teilen ein Beispiel für die Überwachung des CSS3-Animations-Endereignisses

3. Verwenden Sie das Animationsattribut, um eine verzögerte Ausführung zwischen Schleifen zu implementieren Ausführliche Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3

Das obige ist der detaillierte Inhalt von8 Eigenschaften der CSS3-Animation (Animation), die Sie beherrschen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!