Hat CSS3-Animation eine Ausführungsreihenfolge?

CSS3-Animationen haben eine Ausführungsreihenfolge. Die Reihenfolge der Animationsausführung in CSS beginnt mit dem äußersten Attribut, das durch die Transformation festgelegt wird, und die Syntax lautet „transformieren: das zuletzt ausgeführte Aktionsattribut (Attributwert) ... das erste ausgeführte Aktionsattribut (Attributwert);“. Wenn es in der Animation eine Offset-Aktion und dann eine Rotationsaktion gibt, basiert die Drehung auf dem ursprünglichen Mittelpunkt, sodass Sie bei der Animation zuerst eine Verformung und dann einen Offset durchführen müssen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Hat die CSS3-Animation eine Ausführungsreihenfolge?

Die Ausführungsreihenfolge der Transformationsanimation beginnt mit dem äußersten Attribut, zum Beispiel: transform:translateX(100px) rotation(30deg) , dreht sich die Animation zunächst um 30 Grad und dann um 100 Pixel.

　Wenn Sie es umschalten, transform:rotate(30deg) translatorX(100px), wird die Animation zuerst um 100 Pixel versetzt und dann um 30 Grad gedreht. Beachten Sie hier, dass Sie zuerst versetzen und dann drehen müssen Ein Beispiel für eine Punktrotation

ist wie folgt:

Führen Sie also bei der Animation zuerst andere Verformungen durch und versetzen Sie sie dann.

(Teilen von Lernvideos:

CSS-Video-Tutorial

,

HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonHat CSS3-Animation eine Ausführungsreihenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!