本教程详细讲解如何利用javascript的键盘事件（keydown和keyup）来精确控制css动画的播放状态。我们将学习如何通过动态修改animation-play-state属性，实现动画在按键按下时运行、松开时暂停，并使其无限循环播放，从而创建交互式的网页动画效果。
1. 核心概念解析
要实现通过键盘控制css动画的运行与暂停，我们需要结合以下几个关键技术点：
- CSS animation-play-state 属性： 这是css动画的核心控制属性，它可以设置为 running（运行）或 paused（暂停）。通过javaScript动态修改此属性，可以精确地控制动画的播放状态，而不会影响动画的其他属性（如持续时间、迭代次数等）。
- javascript keydown 事件： 当用户按下键盘上的任意键时触发。我们将利用此事件来启动动画。
- JavaScript keyup 事件： 当用户释放键盘上的任意键时触发。我们将利用此事件来暂停动画。
- CSS animation-iteration-count: infinite： 此属性用于设置动画的循环次数。将其设置为 infinite 可以使动画无限次循环播放，满足动画不停止的需求。
2. 实践：构建键盘控制动画
我们将通过一个“旋转球”的例子来演示如何实现这一功能。
2.1 html 结构
首先，我们需要一个简单的HTML结构来承载我们的动画元素。这里我们创建一个包含一个可旋转球体的容器。
<div class="linje"> <div id="ball"> <p id="roter">161519</p> </div> </div>- div.linje：作为动画的舞台或容器。
- div#ball：代表我们的“球体”，它将进行移动和旋转动画。
- p#roter：球体内部的文本，它将独立进行旋转动画，模拟球体内部元素的旋转。
2.2 CSS 样式与动画定义
接下来，定义元素的样式和关键帧动画。重要的是，在CSS中预先设置动画并将其初始播放状态设为 paused，同时确保动画无限循环。
立即学习“前端免费学习笔记（深入）”；
.linje { width: 1000px; height: 500px; } #ball { position: relative; top: 40px; left: 0; width: 100px; height: 100px; background-color: rgb(114, 240, 214); border-radius: 50%; /* 定义动画：名称、持续时间、时间函数、无限循环 */ animation: rulle 4s infinite linear; /* 初始状态为暂停 */ animation-play-state: paused; text-align: center; line-height: 100px; } /* 定义球体移动和旋转的关键帧动画 */ @keyframes rulle { 0% { top: 40px; left: 0; transform: rotate(0deg); } 12.5% { top: 40px; left: 50px; transform: rotate(45deg); } 25% { top: 40px; left: 100px; transform: rotate(90deg); } 37.5% { top: 40px; left: 150px; transform: rotate(135deg); } 50% { top: 40px; left: 200px; transform: rotate(180deg); } 62.5% { top: 40px; left: 250px; transform: rotate(225deg); } 75% { top: 40px; left: 300px; transform: rotate(270deg); } 87.5% { top: 40px; left: 350px; transform: rotate(315deg); } 100% { top: 40px; left: 250px; transform: rotate(360deg); } } #roter { /* 定义动画：名称、持续时间、时间函数、无限循环 */ animation: roter 4s linear infinite; /* 初始状态为暂停 */ animation-play-state: paused; } /* 定义内部文本的旋转关键帧动画 */ @keyframes roter { 0% { /* 保持原样 */ } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }关键点：
- 在 #ball 和 #roter 的 animation 属性中都加入了 infinite 关键字，确保动画无限循环。
- 通过 animation-play-state: paused; 将动画的初始状态设置为暂停，防止页面加载后动画立即播放。
2.3 JavaScript 交互逻辑
最后，编写JavaScript代码来监听键盘事件并控制动画的播放状态。
// 获取需要控制动画的DOM元素 const ball = document.querySelector("#ball"); const roter = document.querySelector("#roter"); // 监听 'keydown' 事件：当任意键按下时，设置动画播放状态为 'running' window.addEventListener("keydown", () => { ball.style.animationPlayState = "running"; roter.style.animationPlayState = "running"; }); // 监听 'keyup' 事件：当任意键释放时，设置动画播放状态为 'paused' window.addEventListener("keyup", () => { ball.style.animationPlayState = "paused"; roter.style.animationPlayState = "paused"; });关键点：
- 使用 window.addEventListener 监听全局的 keydown 和 keyup 事件，这样无论用户按下哪个键，动画都会响应。
- 直接修改元素的 style.animationPlayState 属性，这是控制CSS动画播放状态的最佳实践。它只改变动画的播放状态，而不会重置动画的其他属性。
3. 注意事项与最佳实践
- 避免重复设置 animation 属性： 原始代码中在 keydown 事件中重新设置了 ball.style.animation = “…”。这种做法会重置整个动画，导致动画从头开始而不是从当前暂停的位置继续。正确的做法是仅修改 animation-play-state。
- 选择合适的事件： keydown 和 keyup 是实现按住播放、松开暂停的关键。如果只需要按一次切换状态，可以考虑 keypress (已废弃，推荐使用 keydown 并判断 event.repeat) 或更复杂的逻辑。
- 动画平滑性： 确保 keyframes 定义的动画路径是平滑的。如果动画在某些点出现跳跃，需要检查关键帧之间的过渡是否自然。例如，本教程中的 rulle 动画在 100% 处的 left 值与 87.5% 处的 left 值之间存在回退，这可能导致动画在循环时显得不那么流畅。根据实际需求调整关键帧。
- 多元素控制： 如果有多个动画元素需要同时控制，如本例中的 #ball 和 #roter，确保对每个元素都应用相同的 animation-play-state 逻辑。
- 用户体验： 考虑为用户提供视觉反馈，例如在动画运行时改变元素的边框颜色或添加提示文本，以增强交互体验。
4. 总结
通过本教程，我们学习了如何利用JavaScript的 keydown 和 keyup 事件，结合CSS的 animation-play-state 属性以及 animation-iteration-count: infinite，实现对CSS动画的精确键盘控制。这种方法不仅功能强大，而且代码简洁高效，是创建交互式网页动画的有效途径。理解并应用这些核心概念，将帮助您在前端开发中实现更丰富的用户交互体验。