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

How to write CSS3 animations with JavaScript objects?

本文关键字：CSS3 动画 对象 何使用 JavaScript      更新时间：2024-03-04

对于我正在制作的动画库，我想要过渡和动画。

过渡很简单。我可以很容易地从元素对象的样式属性访问转换属性：

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

我知道在CSS中，动画有两个部分，@-keyframe，然后调用实际的动画。

如何通过纯JavaScript分配@-keyframe规则？

它不像过渡，因为@-keyframe规则不会直接应用于元素。

另一种选择是通过JavaScript从字符串中动态创建@-keyframe规则，并将其附加到临时样式表中。有点草率，这就是为什么我想知道如何直接通过DOM来完成它。

有办法吗？从我在其他一些网站上看到的情况来看，你可以播放动画并在某些关键帧停止它们，但你如何创建动画本身呢？

您必须使用CSSOM，它允许您（除其他外）操作文档中加载的样式表。首先，您需要在文档中加载一个样式表，在其中添加@keyframe规则。如果没有，可以动态创建一个style HTML元素，并将其附加到head中。然后，您必须获得代表样式表的CSSStyleSheet接口的实例，您可以检索style（或link）HTML元素的sheet属性，也可以从document.styleSheets中的列表中获取它。

一旦你有了对象，你可以简单地调用方法insertRule，将整个规则作为字符串传递，第二个参数是一个指示位置的数字（这个规则将添加到哪个规则之前）。

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

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

结账http://krazyjakee.github.io/jQuery.Keyframes/如果您使用jQuery。

如果你想要纯javascript solation，那么看看这篇文章

相关文章：