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，它允许您（以及其他内容）操作文档中加载的样式表。首先，您需要在文档中加载样式表，您将在其中添加@keyframe规则。如果您没有，则可以动态创建style HTML元素并将其附加到head。然后，您必须获取表示样式表的CSSStyleSheet接口的实例，您可以检索sheet（或style）HTML元素的link属性，或者从document.styleSheets的可用列表中获取。

一旦有了对象，就可以简单地在其上调用方法insertRule，将整个规则作为字符串传递，对于第二个参数，指示位置的数字（在此规则之前添加规则）。< / p>

如果您必须进一步操纵动画，请查看API：http://www.w3.org/TR/css3-animations/#dom-interfaces http://www.w3.org/TR/DOM-Level-2-Style/css.html

Answer 2

我没有看到任何javascript api解决方案，但可以使用javaScript生成的css样式。

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

如果您持有纯粹的javascript solition，请查看this post

如何用JavaScript对象编写CSS3动画？

2 个答案: