CSS3 Animation "Fortschritt" Rückruf

Question

Ich wollte nur wissen, ob es eine Möglichkeit gibt, den Fortschritt der Animation eines Elements zu überwachen. Alles was ich weiß ist animationstart und animationend, Gibt es eine Art von animationprogress?

Answer 1

Nein, es gibt kein animationprogess Ereignis. Pro W3 specification gibt es drei Arten von AnimationEvent Ereignisse. Es gibt animationstart, animationend und animationiteration. animationiteration wird anstelle von animationend ausgelöst, wenn die Animation gerade wiederholt wird.

Sie könnten vermutlich eine setInterval() verwenden, die für einen Bruchteil der Animationszeit (z. B. 10% der Animationszeit) festgelegt wurde und dann an jedem Punkt der Animation aufgerufen wird. Sie können den Fortschritt der Animation bei jedem dieser Timer-Ereignisse abfragen, wenn Sie eine genaue Position der Animation benötigen.

Oder, wenn Sie mehr Präzision des Timings wollten, könnten Sie Ihre Animation in mehrere sequentielle Animationen aufteilen und animationend auf jedem Stück als Ihre Fortschrittsanzeige und den Auslöser verwenden, um die nächste Phase der Animation zu starten.