本教程详细介绍了如何利用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：确保动画
