如何通过键盘按键控制CSS动画的播放与暂停-html教程-PHP中文网

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

心靈之曲

发布： 2025-12-13 16:25:54

原创

424人浏览过

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

本教程详细介绍了如何利用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则让动画在页面加载后不立即启动。

独响

一个轻笔记+角色扮演的app

249

查看详情

二、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";
});

登录后复制