如何使用JavaScript對象編寫CSS3動畫？

Question

對於我正在制作的動畫庫，我需要過渡和動畫。

過渡很簡單。 我可以輕松地從元素對象的style屬性訪問transition屬性：

   document.body.style['-webkit-transition'] = "background 1s";
   document.body.background = "#f00";

我知道在CSS中，動畫有兩個部分，@ -keyframes然后調用實際的動畫。

如何通過純JavaScript 分配 @ -keyframe規則？

這不會像過渡，因為@ -keyframe規則不會直接應用於元素。

替代方法是通過JavaScript從字符串動態創建@ -keyframes規則，並將其附加到臨時樣式表中。 有點草率，這就是為什么我想知道如何直接通過DOM做到這一點。

有辦法嗎？ 從其他網站上可以看到，您可以播放動畫並在某些關鍵幀處停止它們，但是如何自己創建動畫呢？

Answer 1

您必須使用CSSOM，CSSOM允許您（除其他外）操縱文檔中加載的樣式表。 首先，您需要在文檔中加載樣式表，並在其中添加@keyframe規則。 如果您還沒有，可以動態創建style HTML元素並將其附加到head 。 然后，您必須獲取表示樣式表的CSSStyleSheet接口的實例，可以檢索style （或link ）HTML元素的sheet屬性，也可以從document.styleSheets可用列表中獲取該屬性。

一旦有了對象，您就可以簡單地在其上調用方法insertRule ，將整個規則作為字符串傳遞，對於第二個參數，通過一個數字指示位置（在此規則之前添加規則）。

如果您必須進一步處理動畫，請看一下API： http : //www.w3.org/TR/css3-animations/#dom-interfaces http://www.w3.org/TR/DOM- Level-2的樣式/ css.html

Answer 2

我還沒有看到任何javascript api解決方案，但是可以使用從javaScript生成的css樣式。

如果使用jQuery，請查看http://krazyjakee.github.io/jQuery.Keyframes/ 。

如果您想使用純JavaScript隔離，請看看這篇文章