黑客CSS動畫狀態和播放時間

> > > > > > > > > > > >

不使用JavaScript。作者講述了他們建立僅CSS僅Wolfenstein 3D啟發的遊戲的經驗，突出了兩個特別棘手的動畫問題：觸發武器對敵人的點擊啟用武器發射動畫，並為老闆的最終命中實施巨大的慢動作。

圍繞Browsers的核心問題圍繞著瀏覽器的核心問題，圍繞著Browsers的動物處理狀態。 Simply adding or modifying animation properties while an animation is already running doesn't always restart or slow it down as expected.

Problem 1: Replaying Animations

The author explores several approaches to replaying animations:

• Multiple Checkboxes (Ineffective): Using separate checkboxes for each animation attempt fails because CSS only continues現有動畫，不重新啟動。功能，但可以通過 Animation-Fill模式導致意外行為：forwards 。

關鍵要點是您不能直接重新啟動CSS動畫；您必須添加一個新的。

問題2：慢動作

簡單地更改動畫效應，而動畫正在運行會導致跳躍的刺激。 The browser applies the new duration from the animation's start, not its current state.

Several approaches are explored:

• Direct animation-duration Change (Ineffective): Changing animation-duration mid-animation causes visual glitches.
• Pausing and Appending a Slower動畫：暫停原始動畫並添加一個具有相同起點的較慢的動畫，由於無法預測的暫停點而導致跳躍。但是，這需要瀏覽器支持 @property 。
• “齒輪轉移”技術：這種聰明的技術使用嵌套的Divs，每個Divs都帶有動畫，以在動畫速度之間切換。它是特定於動畫的，並且不能很好地概括。
• javaScript解決方案： javaScript為處理動畫的進度和在不同的動畫速度之間無縫過渡，為複雜動畫提供了靈活性，為複雜動畫提供了更強大的解決方案。操縱CSS動畫涉及的挑戰和解決方案。作者鼓勵讀者探索提供的例子並分享他們的想法。

以上是黑客CSS動畫狀態和播放時間的詳細內容。更多資訊請關注PHP中文網其他相關文章！