js 创建keyframe_js如何动态修改@keyframes相关值?
时间: 2023-12-01 21:03:42 浏览: 36
JS创建keyframe动画需要使用`@keyframes`规则和`animation`属性。要动态修改`@keyframes`相关值,可以通过以下步骤进行操作:
1. 使用JavaScript创建一个`style`标签,并将其添加到文档中。
```javascript
var style = document.createElement('style');
document.head.appendChild(style);
```
2. 在`style`标签中创建`@keyframes`规则,并定义动画中的关键帧。
```javascript
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`属性将动画应用于元素,并定义动画的持续时间、延迟、重复次数等属性。
```javascript
var element = document.getElementById('myElement');
element.style.animation = 'myAnimation 1s linear 0s alternate both';
```
这里将动画应用于`id`为`myElement`的元素,并设置了动画的持续时间为1秒、延迟为0秒、重复方式为交替和反向,即来回循环。
4. 动态修改`@keyframes`规则中的属性值。
```javascript
var rule = style.sheet.cssRules[0];
rule.deleteRule('100%');
rule.insertRule('100% { transform: translateX(200px); }');
```
这里获取了创建的`@keyframes`规则,并删除了原先的100%关键帧,并添加了一个新的100%关键帧,将`translateX`的值从100像素修改为200像素。
这样就可以通过JavaScript动态修改`@keyframes`相关值了。