本教程详细介绍了如何利用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)
键盘控制CSS动画 动画元素
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：确保动画
以上就是如何通过键盘按键控制CSS动画的播放与暂停的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604250.html
微信扫一扫 
支付宝扫一扫 
