如何使用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隔离，请看看这篇文章