js动态添加@keyframes
时间: 2023-10-15 21:03:58 浏览: 37
要在 JavaScript 中动态添加 @keyframes,可以使用 `CSSStyleSheet.insertRule()` 方法。以下是示例代码:
```javascript
// 创建一个新的 @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`标签,并将其添加到文档中。
```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`相关值了。
动态设置keyframes
在CSS中,可以使用@keyframes规则来创建动画序列,然后将其应用到元素上。要动态设置keyframes,可以使用JavaScript来创建动态的样式规则并将其插入到文档中。
以下是一个简单的示例,展示如何使用JavaScript动态设置keyframes:
```html
<div class="box"></div>
<button onclick="startAnimation()">开始动画</button>
```
```css
.box {
width: 100px;
height: 100px;
background-color: red;
animation-duration: 2s;
animation-name: dynamic-animation;
}
@keyframes dynamic-animation {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
```
```javascript
function startAnimation() {
// 创建一个style标签,并将其添加到head中
var style = document.createElement('style');
document.head.appendChild(style);
// 将动态生成的keyframes规则添加到style标签中
var sheet = style.sheet;
sheet.insertRule(`@keyframes dynamic-animation {
from {
transform: scale(1);
}
to {
transform: scale(3);
}
}`, sheet.cssRules.length);
// 将动画应用到元素上
var box = document.querySelector('.box');
box.style.animationName = 'dynamic-animation';
}
```
当用户点击“开始动画”按钮时,会动态生成一个@keyframes规则并将其添加到页面的<head>标签中的<style>标签中。然后,使用JavaScript将该动画应用到元素上,并开始播放动画。这样就可以通过JavaScript动态设置keyframes了。