在前端页面开发中，CSS动画可以实现丰富的视觉效果，而通过键盘事件控制动画的播放与暂停，能让用户获得更灵活的交互体验。这种实现方式不需要复杂的第三方库，仅依靠原生CSS和JavaScript即可完成。
核心实现原理
要实现键盘控制CSS动画的播放与暂停，需要结合两个核心知识点：CSS的animation-play-state属性，以及JavaScript的键盘事件监听。
animation-play-state是CSS动画的核心属性，用来控制动画的运行状态，它有两个常用取值：running表示动画正在播放，paused表示动画暂停。我们只需要通过JavaScript修改这个属性的取值，就能切换动画状态。
键盘事件方面，我们通常使用keydown或者keyup事件监听用户的键盘操作，通过判断按下的按键键值，触发对应的动画状态切换逻辑。
实现步骤
1. 编写基础CSS动画
首先我们需要定义一个基础的CSS动画，设置好动画的关键帧和默认状态。这里以一个简单的方块移动动画为例：
/* 定义动画关键帧 */
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
/* 动画元素基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 应用动画，默认播放状态 */
animation: move 2s infinite linear;
animation-play-state: running;
}
2. 监听键盘事件
接下来通过JavaScript监听键盘事件，这里假设我们约定按下空格键切换动画的播放和暂停状态：
// 获取动画元素
const box = document.querySelector('.box');
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
// 判断按下的是否是空格键，空格键的key值为Space
if (event.key === 'Space') {
// 获取当前动画的播放状态
const currentState = window.getComputedStyle(box).animationPlayState;
// 切换状态
if (currentState === 'running') {
box.style.animationPlayState = 'paused';
} else {
box.style.animationPlayState = 'running';
}
}
});
3. 完整HTML示例
将上面的CSS和JavaScript整合到HTML页面中，就可以看到完整的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘控制CSS动画</title>
<style>
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
.box {
width: 100px;
height: 100px;
background-color: #409eff;
animation: move 2s infinite linear;
animation-play-state: running;
margin-top: 50px;
}
.tip {
margin-top: 20px;
color: #666;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="tip">按下空格键可以切换动画的播放与暂停状态</div>
<script>
const box = document.querySelector('.box');
document.addEventListener('keydown', function(event) {
if (event.key === 'Space') {
const currentState = window.getComputedStyle(box).animationPlayState;
if (currentState === 'running') {
box.style.animationPlayState = 'paused';
} else {
box.style.animationPlayState = 'running';
}
}
});
</script>
</body>
</html>
注意事项
- 获取
animation-play-state属性时，建议使用window.getComputedStyle方法，这样可以获取到元素最终生效的样式，避免直接读取style属性获取不到外部样式表中设置的值。 - 键盘事件的判断可以根据需求调整，比如可以设置按下P键暂停，按下R键播放，只需要修改判断的键值即可。
- 如果页面中有多个动画元素需要控制，可以给元素添加统一的类名，通过循环遍历的方式批量修改状态。
需要注意的是，部分浏览器对键盘事件的默认行为可能有特殊处理，比如按下空格键可能会滚动页面，如果需要避免这种情况，可以在事件处理函数中调用event.preventDefault()方法阻止默认行为。
CSS动画键盘事件JavaScriptanimation_play_state修改时间：2026-07-13 12:18:22