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

Question

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

过渡很简单。我可以轻松地从元素对象的样式属性访问过渡属性:

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

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

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

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

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

有办法吗？根据我在其他一些网站上看到的情况，您可以播放动画并在特定关键帧停止播放，但您如何创建自己的动画？

Answer 1

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

一旦你有了这个对象，你就可以简单地调用 insertRule 方法，将整个规则作为一个字符串传递，第二个参数是一个数字，表示位置(在哪个规则之前添加这个规则).

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