用一个按钮控制css动画怎么写,使用js和css
时间: 2024-03-12 22:49:01 浏览: 14
可以使用JavaScript来控制CSS动画。具体实现步骤如下:
1. 在HTML中创建一个按钮和需要控制的元素。
```html
<button id="animation-btn">点击开始动画</button>
<div id="animation-element"></div>
```
2. 在CSS中定义需要控制的动画。
```css
#animation-element {
width: 100px;
height: 100px;
background-color: red;
animation: scale 1s ease-in-out forwards;
}
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
```
3. 使用JavaScript来控制动画的播放和暂停。
```javascript
const btn = document.getElementById('animation-btn');
const element = document.getElementById('animation-element');
btn.addEventListener('click', () => {
if (element.style.animationPlayState === 'paused') {
element.style.animationPlayState = 'running';
} else {
element.style.animationPlayState = 'paused';
}
})
```
这段代码中,我们首先获取到按钮和需要控制的元素。然后给按钮添加一个点击事件监听器,当点击按钮时,检查动画元素的当前状态,如果是暂停状态,那么将其设置为运行状态,否则将其设置为暂停状态。这样就可以通过按钮来控制动画了。