对于我正在制作的动画库，我想要过渡和动画。
过渡很简单。我可以很容易地从元素对象的样式属性中访问过渡属性：
document.body.style['-webkit-transition'] = "background 1s";
document.body.background = "#f00";
我知道在 CSS 中，动画有两个部分，@-keyframes 然后调用实际的动画。
如何通过纯 JavaScript分配@-keyframe 规则？
它不会类似于过渡，因为@-keyframe 规则不会直接应用于元素。
另一种方法是通过 JavaScript 从字符串动态创建 @-keyframes 规则，并将其附加到临时样式表中。有点草率，这就是为什么我想知道如何直接通过 DOM 做到这一点。
有办法吗？根据我在其他一些网站上看到的情况，您可以播放动画并在某些关键帧处停止它们，但您如何创建动画本身？
【问题讨论】：
标签： javascript css dom
您必须使用 CSSOM，它允许您（除其他外）操作加载到文档中的样式表。首先，您需要在文档中加载一个样式表，您将在其中添加@keyframe 规则。如果您还没有，您可以动态创建一个style HTML 元素并将其附加到head。然后您必须获取代表样式表的CSSStyleSheet 接口的实例，您可以检索style（或link）HTML 元素的sheet 属性，或者从@ 提供的列表中获取它987654331@.
一旦你有了对象，你可以简单地调用方法insertRule，将整个规则作为字符串传递，第二个参数是一个指示位置的数字（在哪个规则之前添加这个）。
如果您必须进一步操作动画，请查看 API：http://www.w3.org/TR/css3-animations/#dom-interfaceshttp://www.w3.org/TR/DOM-Level-2-Style/css.html
【讨论】：
我还没有看到任何 javascript api 解决方案，但可以使用从 javaScript 生成的 css 样式。
如果您使用 jQuery，请查看 http://krazyjakee.github.io/jQuery.Keyframes/。
如果您想要纯 javascript solition，请查看 this post
【讨论】：