CSS3動畫“進度”回調

Question

我只是想知道是否有一種方法可以監視元素動畫的進度。 我所知道的只是animationstart和animationend ，是否存在某種animationprogress ？

Answer 1

不，沒有animationprogess事件。 根據W3規范 ，存在三種類型的AnimationEvent事件。 有animationstart ， animationend和animationiteration 。 當動畫要再次重復播放時，會觸發animationiteration代替animationend 。

您大概可以使用setInterval()設置為動畫時間的一小部分（例如動畫時間的10％），然后在動畫的每個點都會被調用。 如果需要精確定位動畫，則可以在任何這些計時器事件中查詢動畫的進度。

或者，如果您想要更精確的定時，則可以將動畫分解為多個連續動畫，並在每個片段上使用animationend作為進度指示器和觸發以開始下一階段動畫的觸發器。