运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

如何通过键盘按键控制CSS动画的播放与暂停

如何通过键盘按键控制CSS动画的播放与暂停

本教程详细介绍了如何利用j*ascript的键盘事件（keydown和keyup）来动态控制css动画的播放和暂停状态。我们将学习如何配置css动画使其无限循环并初始暂停，并通过j*ascript监听用户按键行为，实现按键时动画运行、松开按键时动画暂停的交互效果。

在现代网页设计中，动画是提升用户体验的重要元素。CSS动画提供了一种声明式的方式来创建复杂的动画效果，而J*aScript则能赋予这些动画更强大的交互性。本文将深入探讨如何结合CSS和J*aScript，实现通过键盘按键来精确控制动画的播放与暂停。

一、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则让动画在页面加载后不立即启动。

察言观数AskTable 察言观数AskTable

企业级AI数据表格智能体平台

察言观数AskTable 78 查看详情 察言观数AskTable

二、J*aScript事件监听与动画控制

通过J*aScript，我们可以监听用户的键盘操作，并根据按键状态来动态改变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和J*aScript代码示例，展示了如何实现按住任意键播放动画，松开按键暂停动画的效果。

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); }
}

J*aScript逻辑 (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动画播放/暂停的关键。通过J*aScript动态修改此属性，可以轻松实现动画的启停。
  • animation-iteration-count: infinite：确保动画

以上就是如何通过键盘按键控制CSS动画的播放与暂停的详细内容，更多请关注其它相关文章！


# javascript  # java  # html  # css  # 如何设置  # 浦江短视频营销推广公司  # 是一个  # 这是  # 企业建设网站模块设置  # 小红书怎么找网站推广的  # 峄城优化网站推广  # 租房网站建设工作内容  # 郑州抖音seo优化推广  # seo锚文怎么用  # 抖音营销推广公司加盟电话  # 国外seo推广是啥  # 金山区快手营销推广  # 如何做  # 结束时  # 我们可以  # 如何实现  # 在这个  # 按下  # html元素  # 键盘事件  # css样式  # css动画  # 网页设计  # win  # js 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： 抖音网页版地址直接进入_抖音网页版在线观看入口  米侠浏览器插件无法启用怎么办 米侠浏览器扩展兼容性修复  更换小红书群背景怎么换?小红书群规则怎么设置？  GBA模拟器手柄按键设置  《下一站江湖2》独孤剑诀习得方法  《桃源记2》资源采集攻略  123网页端官方登录页 123邮箱网页版即时通讯服务  J*aScript文本高亮功能优化：解决多词匹配错误与精确分割策略  J*aScript字符串_Unicode处理  Python定时发送QQ消息  小米civi如何设置锁屏时间  魔法祈幻界兑换码礼包大全  在Peewee中处理PostgreSQL记录重复：一站式数据摄取教程  获取WooCommerce产品在后台编辑页面的分类ID  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  C++ priority_queue怎么用_C++优先队列底层实现与自定义比较器  《爱南宁》认证电动车方法  12306夜间购票失败？ | 查看官方公布的暂停服务公告与应对方案  使用 .htaccess 正确配置 WordPress 子目录重定向与路径保留  word怎么将图片设置为页面背景并不影响打印_Word图片背景设置方法  excel怎么制作考勤表 excel考勤模板与函数公式讲解  小红书如何引流到私信？引流到私信有用吗？  第五人格PC版怎么避免被封号_第五人格PC版防封号注意事项  Linux如何优化系统启动流程_Linux启动项优化方案  Chart.js 教程：自定义插件实现图表与图例间距调整  《画加》约稿流程  QQ邮箱注册地址 免费获取QQ邮箱账号  智慧职教mooc平台登录网址 智慧职教mooc官网直达  铁路12306入口 铁路12306官网版入口登录网址  PHP 4 函数中引用参数的默认值限制与解决方案  火狐浏览器无法自动更新怎么办 手动更新火狐浏览器到最新版本【解决】  2025考研成绩查询时间入口分享  j*a中ArrayBlockingQueue的使用  火柴人战争网页版在线玩  Eclipse开发J*a快速入门  HTML Canvas文本样式定制指南：解决外部字体加载与应用难题  使用VS Code作为你的个人知识管理系统  QQ邮箱官方登录页_腾讯出品安全稳定的邮箱服务  《下一站江湖2》心法融合技巧  《宝可梦大集结》S4冠军之路开始时间介绍  汽水音乐车机版官网5.0 汽水音乐车机版5.0版本下载入口  易车网官网直达入口 易车网在线登录入口  SQL聚合查询、联接与筛选：GROUP BY 子句的正确使用与常见陷阱  Bootstrap 5导航栏折叠功能失效：数据属性迁移指南  解决CSS布局中意外顶部空白问题的教程  WPS文字如何进行简繁转换  Yandex世界探索 最新官方免登录入口全知道  qq邮箱怎么注册_QQ邮箱注册步骤与注意事项  百度小说看书时如何翻页_百度小说手动翻页与自动翻页设置  CSS过渡与滚动滚动事件结合应用_scroll与transition动画 

 2025-12-13

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.