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

本文深入研究了CSS動畫，專門解決了不使用JavaScript而在不使用JavaScript的情況下重新啟動和放慢動畫的挑戰。作者講述了他們建立僅CSS的僅限Wolfenstein 3D啟發的遊戲的經驗，突出了兩個特別棘手的動畫問題：觸發武器對敵人的點擊啟動武器發射動畫，並為老闆的最終擊中實施戲劇性的慢動作。

核心問題圍繞瀏覽器處理動畫狀態。在動畫已經運行時，只需添加或修改動畫屬性，並不總是會按預期重新啟動或慢慢降低。

問題1：重播動畫

作者探索了幾種重播動畫的方法：

• 多個複選框（無效）：為每個動畫嘗試使用單獨的複選框失敗，因為CSS僅繼續進行現有動畫，而不是重新啟動它。
• 動畫克隆：為每個觸發器創建不同的動畫名稱（ spin1 ， spin2 ），但需要仔細的CSS規則排序。
• 附加動畫：在animation-name屬性中多次添加相同的動畫也起作用，但會導致animation-fill-mode: forwards 。

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

問題2：慢動作

在動畫運行時，簡單地改變animation-duration會導致跳躍。瀏覽器從動畫開始時就應用了新的持續時間，而不是其當前狀態。

探索了幾種方法：

• 直接animation-duration變化（無效）：改變animation-duration中間動作會導致視覺故障。
• 暫停和附加較慢的動畫：暫停原始動畫並添加一個具有相同起點的較慢動畫，由於無法預測的暫停點，仍然會導致跳躍。
• 使用自定義屬性：一種更複雜的方法使用自定義屬性（ --angle1 ， --angle2 ）來跟踪動畫的進度，並在不同持續時間的動畫之間無縫過渡。但是，這需要瀏覽器對@property的支持。
• “齒輪轉移”技術：這種聰明的技術使用嵌套的Divs，每個Divs都帶有動畫，在動畫速度之間切換。它是特定於動畫的，並且不能很好地概括。
• JavaScript解決方案： JavaScript提供了更強大的解決方案，用於處理動畫進度並在不同的動畫速度之間無縫過渡，從而為複雜的動畫提供了靈活性。

這篇文章結束時要承認其他僅CSS項目的靈感，並對操縱CSS動畫所涉及的挑戰和解決方案提供了全面的概述。作者鼓勵讀者探索提供的例子並分享他們的想法。

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