如何动态创建“@-Keyframe”CSS 动画？

在 CSS 中，我们可以使用 @keyframes 规则来创建动画，并使用 animation 属性来应用它。通常情况下，我们在 CSS 文件中定义 @keyframes 规则，然后在 HTML 文件中引用 CSS 文件并将动画应用到元素上。

但是有时候我们需要在 JavaScript 中动态地创建动画，并且不能使用预定义的 @keyframes 规则。这时候就需要使用 CSSRule 接口来动态创建 @keyframes 规则。

创建 @keyframes 规则

我们可以使用 CSSStyleSheet 的 insertRule 方法来创建 @keyframes 规则。以下是创建 @keyframes 规则的步骤：

1. 创建一个新的 CSSStyleSheet 对象。

const sheet = new CSSStyleSheet();

2. 创建一个 @keyframes 规则字符串。

const keyframesRule = `@keyframes my-animation {
  0% { transform: translateY(0); }
  100% { transform: translateY(100px); }
}`;

3. 添加 @keyframes 规则字符串到 CSSStyleSheet 对象中。

sheet.insertRule(keyframesRule);

现在我们已经成功创建了一个 @keyframes 规则，并将其添加到 CSSStyleSheet 对象中。

应用动画

接下来，我们将创建一个 HTML 元素并将动画应用到它上面。

1. 创建一个 HTML 元素。

const box = document.createElement('div');

2. 添加样式到元素中，包括动画名称和持续时间。

box.style.animationName = 'my-animation';
box.style.animationDuration = '2s';

现在我们已经成功创建了一个元素，并将动画应用到它上面。

将样式添加到页面中

最后，我们将 CSSStyleSheet 对象中的规则添加到页面的样式表中。

document.adoptedStyleSheets = [sheet];

现在我们已经成功动态创建了一个 @keyframes 规则，并将动画应用到一个 HTML 元素上。

完整的示例代码：

const sheet = new CSSStyleSheet();

const keyframesRule = `@keyframes my-animation {
    0% { transform: translateY(0); }
    100% { transform: translateY(100px); }
  }`;

sheet.insertRule(keyframesRule);

const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
box.style.animationName = 'my-animation';
box.style.animationDuration = '2s';

document.adoptedStyleSheets = [sheet];

document.body.appendChild(box);

以上就是使用 JavaScript 动态创建 @keyframes 规则和应用动画的完整过程，希望对你有所帮助！