在前端交互开发中，通过键盘按键控制CSS动画的播放与暂停是很常见的需求，比如游戏中的角色动作控制、展示页面的交互操作等。实现这个功能的核心是先定义好CSS动画，再通过JavaScript监听键盘事件，动态修改动画的执行状态。
一、基础CSS动画定义
首先需要定义一个基础的CSS动画，这里以一个简单的方块移动动画为例，动画会让方块在水平方向来回移动。
/* 定义方块基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 绑定动画，动画名move，持续2秒，无限循环，线性运动 */
animation: move 2s infinite linear;
}
/* 定义移动动画关键帧 */
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(0);
}
}
二、JavaScript监听键盘事件
要实现键盘控制，需要监听keydown事件，判断按下的按键是否符合触发条件，这里我们使用空格键作为控制按键，按下空格键切换动画的播放和暂停状态。
CSS动画的状态可以通过animation-play-state属性控制，该属性有两个值：running表示动画正在播放，paused表示动画暂停。
核心实现步骤
- 获取需要控制的动画元素
- 监听全局的键盘按下事件
- 判断按下的按键是否为目标按键（这里是空格键，键码为32）
- 获取当前动画的
animation-play-state状态，切换为相反状态
三、完整实现代码
下面是完整的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>
.box {
width: 100px;
height: 100px;
background-color: #409eff;
animation: move 2s infinite linear;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(0);
}
}
.tip {
margin-top: 20px;
color: #666;
}
</style>
</head>
<body>
<div class="box" id="animateBox"></div>
<div class="tip">按下空格键可以切换动画的播放与暂停状态</div>
<script>
// 获取动画元素
const box = document.getElementById('animateBox');
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
// 判断是否为空格键，空格键的keyCode为32
if (event.keyCode === 32) {
// 阻止空格键的默认滚动行为
event.preventDefault();
// 获取当前动画状态
const currentState = window.getComputedStyle(box).animationPlayState;
// 切换状态
if (currentState === 'running') {
box.style.animationPlayState = 'paused';
} else {
box.style.animationPlayState = 'running';
}
}
});
</script>
</body>
</html>
四、注意事项
在实际开发中需要注意几个问题：首先是键盘事件的监听对象，如果是单页面应用，可能需要根据场景选择监听document还是具体容器；其次如果页面中有多个动画需要分别控制，需要给每个动画元素添加独立的标识，在事件处理中区分不同的元素；另外如果需要支持更多按键控制，比如左右键控制动画方向，可以在判断条件中增加对应的键码判断，再配合修改transform等属性实现更多交互效果。
如果需要兼容更老的浏览器，需要注意animation-play-state属性的兼容性，部分旧版本浏览器可能需要添加前缀，比如-webkit-animation-play-state。
JavaScriptCSS_animation键盘事件动画控制修改时间：2026-07-10 22:30:35