本教程详细介绍了如何利用javascript的键盘事件（keydown和keyup）来动态控制css动画的播放和暂停状态。我们将学习如何配置css动画使其无限循环并初始暂停，并通过javascript监听用户按键行为，实现按键时动画运行、松开按键时动画暂停的交互效果。
在现代网页设计中，动画是提升用户体验的重要元素。css动画提供了一种声明式的方式来创建复杂的动画效果，而javaScript则能赋予这些动画更强大的交互性。本文将深入探讨如何结合CSS和javascript，实现通过键盘按键来精确控制动画的播放与暂停。
一、css动画基础与初始配置
要实现通过按键控制的动画，首先需要定义动画本身，并设置其初始状态。
1. 定义关键帧动画 (@keyframes)
使用@keyframes规则定义动画的各个阶段。每个关键帧（如0%、50%、100%）都定义了元素在该时间点的样式。
@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); } } @keyframes roter { 0%{ transform: rotate(0deg); } 25%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 75%{ transform: rotate(270deg); } 100%{ transform: rotate(360deg); } }2. 应用动画并设置初始状态
将定义的动画应用到html元素上，并设置其播放属性。为了实现按键控制，我们需要：
立即学习“前端免费学习笔记（深入）”；
- 无限循环 (animation-iteration-count: infinite)：确保动画在播放时不会只运行一次。
- 初始暂停 (animation-play-state: paused)：在页面加载时动画不自动播放。
这些属性可以通过animation缩写属性或单独的属性来设置。
#ball { /* ... 其他样式 ... */ animation: rulle 4s infinite linear; /* 应用rulle动画，持续4秒，无限循环，线性速度 */ animation-play-state: paused; /* 初始状态为暂停 */ } #roter { /* ... 其他样式 ... */ animation: roter 4s linear infinite; /* 应用roter动画，持续4秒，无限循环，线性速度 */ animation-play-state: paused; /* 初始状态为暂停 */ }这里，infinite确保动画会持续播放，直到被暂停；paused则让动画在页面加载后不立即启动。
二、JavaScript事件监听与动画控制
通过JavaScript，我们可以监听用户的键盘操作，并根据按键状态来动态改变CSS动画的animation-play-state属性。
1. 监听keydown事件
当用户按下键盘上的任意键时，会触发keydown事件。我们可以在这个事件监听器中将动画的animation-play-state设置为running，从而启动动画。
2. 监听keyup事件
当用户松开键盘上的任意键时，会触发keyup事件。在这个事件监听器中，我们将animation-play-state设置回paused，从而暂停动画。
const ball = document.querySelector("#ball"); const roter = document.querySelector("#roter"); // 监听按键按下事件 window.addEventListener("keydown", () => { ball.style.animationPlayState = "running"; // 启动 #ball 元素的动画 roter.style.animationPlayState = "running"; // 启动 #roter 元素的动画 }); // 监听按键松开事件 window.addEventListener("keyup", () => { ball.style.animationPlayState = "paused"; // 暂停 #ball 元素的动画 roter.style.animationPlayState = "paused"; // 暂停 #roter 元素的动画 });这里，我们通过element.style.animationPlayState直接修改元素的内联样式，这种方式会覆盖CSS中定义的animation-play-state，从而实现动画的动态控制。
三、完整示例
下面是一个完整的HTML、CSS和JavaScript代码示例，展示了如何实现按住任意键播放动画，松开按键暂停动画的效果。
HTML结构 (index.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> <link rel="stylesheet" href="style.css"> </head> <body> <div class="linje"> <div id="ball"> <p id="roter">动画元素</p> </div> </div> <script src="script.js"></script> </body> </html>css样式 (style.css)
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; overflow: hidden; /* 防止动画溢出导致滚动条 */ } .linje { width: 1000px; height: 500px; border: 1px solid #ccc; position: relative; background-color: #fff; } #ball { position: relative; top: 40px; left: 0; width: 100px; height: 100px; background-color: rgb(114, 240, 214); border-radius: 50%; text-align: center; line-height: 100px; font-size: 14px; color: #333; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 应用动画并设置初始状态 */ animation: rulle 4s infinite linear; animation-play-state: paused; } @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 { /* #roter 元素本身的旋转动画 */ animation: roter 4s linear infinite; animation-play-state: paused; } @keyframes roter { 0%{ transform: rotate(0deg); } 25%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 75%{ transform: rotate(270deg); } 100%{ transform: rotate(360deg); } }JavaScript逻辑 (script.js)
const ball = document.querySelector("#ball"); const roter = document.querySelector("#roter"); // 监听按键按下事件，启动动画 window.addEventListener("keydown", () => { ball.style.animationPlayState = "running"; roter.style.animationPlayState = "running"; }); // 监听按键松开事件，暂停动画 window.addEventListener("keyup", () => { ball.style.animationPlayState = "paused"; roter.style.animationPlayState = "paused"; });四、注意事项与总结
- animation-play-state属性：这是控制CSS动画播放/暂停的关键。通过JavaScript动态修改此属性，可以轻松实现动画的启停。
- animation-iteration-count: infinite：确保动画