js动态添加@keyframes

要在 JavaScript 中动态添加 @keyframes，可以使用 `CSSStyleSheet.insertRule()` 方法。以下是示例代码：

// 创建一个新的 @keyframes 规则
var keyframes = "@keyframes my-animation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }";

// 获取文档中的样式表
var styleSheet = document.styleSheets[0];

// 在样式表中插入 @keyframes 规则
styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

这将在文档的第一个样式表中添加一个名为 `my-animation` 的新的 @keyframes 规则，它将使元素在旋转一周后回到原来的位置。

相关问题

js 创建keyframe_js如何动态修改@keyframes相关值？

JS创建keyframe动画需要使用`@keyframes`规则和`animation`属性。要动态修改`@keyframes`相关值，可以通过以下步骤进行操作：

1. 使用JavaScript创建一个`style`标签，并将其添加到文档中。

var style = document.createElement('style');
document.head.appendChild(style);

2. 在`style`标签中创建`@keyframes`规则，并定义动画中的关键帧。

var keyframes = `@keyframes myAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}`;
style.sheet.insertRule(keyframes, 0);

这里创建了一个名为`myAnimation`的动画，其中定义了从0%到100%的关键帧，并设置了从0到100像素的`translateX`变换。

3. 使用`animation`属性将动画应用于元素，并定义动画的持续时间、延迟、重复次数等属性。

var element = document.getElementById('myElement');
element.style.animation = 'myAnimation 1s linear 0s alternate both';

这里将动画应用于`id`为`myElement`的元素，并设置了动画的持续时间为1秒、延迟为0秒、重复方式为交替和反向，即来回循环。

4. 动态修改`@keyframes`规则中的属性值。

var rule = style.sheet.cssRules[0];
rule.deleteRule('100%');
rule.insertRule('100% { transform: translateX(200px); }');

这里获取了创建的`@keyframes`规则，并删除了原先的100%关键帧，并添加了一个新的100%关键帧，将`translateX`的值从100像素修改为200像素。

这样就可以通过JavaScript动态修改`@keyframes`相关值了。

如何优化CSS中的@keyframes规则以解决图片加载时的首次循环闪屏问题？

在使用CSS动画时，尤其是在通过@keyframes定义的背景图片循环中，可能会遇到首次循环时出现闪屏现象，即白色间隙的出现。这主要是由于图片加载延迟或渲染机制导致的。要解决这个问题，可以考虑以下几个优化策略：

参考资源链接：[CSS动画闪屏问题解决：@keyframes 图片加载首次循环出现白色间隙](https://wenku.csdn.net/doc/6453437dfcc53913680430aa?spm=1055.2569.3001.10343)

1. **预加载图片资源**：通过JavaScript或CSS预加载即将使用的图片资源，确保在动画开始时图片已经完全加载。例如，可以使用JavaScript的`Image`对象进行预加载。
2. **利用JavaScript进行动画延迟**：在动画开始前，使用JavaScript进行短暂延迟，以确保图片已经加载完成后再开始动画。这种方法简单，但可能会引入额外的性能开销。
3. **初始隐藏和延时显示**：将动画元素的初始状态设置为不可见（例如设置`opacity: 0`），并通过JavaScript在一段时间后将其设置为可见（`opacity: 1`）。这样，动画开始时已经不是空白。
4. **使用CSS的`will-change`属性**：通过声明`will-change: background-image;`提前告诉浏览器哪个属性将会改变，有助于浏览器优化渲染过程。
5. **渐进式背景切换**：在`@keyframes`的关键帧之间添加过渡帧，让背景图片的切换过程更平滑，减少闪屏现象。
6. **合理使用`background-size`**：选择合适的`background-size`值（如`contain`或`cover`），以平衡图片的显示效果和加载速度。
7. **合并`@keyframes`规则**：减少动画的`@keyframes`规则数量，减少图片切换次数，从而减少闪屏的发生。
8. **优化网络资源**：压缩图片资源，减小文件大小，加快加载速度。
关于如何实现这些策略的具体代码示例和步骤，可以在《CSS动画闪屏问题解决：@keyframes 图片加载首次循环出现白色间隙》一书中找到详细的解答。这本书专注于解决CSS动画中闪屏问题，提供了丰富的案例和解决方案，非常适合需要优化网页动画性能的前端开发者。

参考资源链接：[CSS动画闪屏问题解决：@keyframes 图片加载首次循环出现白色间隙](https://wenku.csdn.net/doc/6453437dfcc53913680430aa?spm=1055.2569.3001.10343)