基于键盘事件控制CSS动画的播放与暂停

admin 百科 2025-12-13 11

基于键盘事件控制CSS动画的播放与暂停

本文详细介绍了如何利用javascript的`keydown`和`keyup`事件，实现对css动画的精确播放与暂停控制。通过动态修改元素的`animation-play-state`属性，并结合`animation-iteration-count: infinite`确保动画循环播放，开发者可以为网页元素创建直观且响应式的交互体验。

在现代网页设计中，为用户提供丰富的交互体验至关重要。其中，通过用户输入（如键盘按键）来控制页面元素的动画是常见的需求。本教程将指导您如何利用JavaScript的键盘事件结合CSS动画属性，实现按键时播放动画、松开按键时暂停动画的功能，并确保动画能够无限次循环播放。

1. CSS动画基础与初始状态设置

首先，我们需要定义元素的动画行为，并设置其初始状态为暂停。这涉及到@keyframes规则和animation属性。

1.1 定义关键帧动画

@keyframes规则用于定义动画的各个阶段。例如，我们定义一个名为rulle的动画，使一个球形元素在水平方向上移动并旋转，以及一个名为roter的动画用于内部文本的旋转。

基于键盘事件控制CSS动画的播放与暂停-第2张图片-佛山资讯网

@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; /* 注意：原问题此处缺少'px'单位，已修正 */
        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; /* 最终位置可根据需求调整，原问题100%回到250px */
        transform: rotate(360deg);
    }
}

@keyframes roter {
    0%{ }
    25%{ transform: rotate(90deg); }
    50%{ transform: rotate(180deg); }
    75%{ transform: rotate(270deg); }
    100%{ transform: rotate(360deg); }
}

登录后复制

1.2 应用动画并设置初始状态

接下来，我们将这些动画应用到相应的HTML元素上。关键在于使用animation简写属性来定义动画的持续时间、缓动函数和迭代次数，并显式地将animation-play-state设置为paused，确保动画在页面加载时不会自动播放。

立即学习“前端免费学习笔记（深入）”；

.linje{
    width: 1000px;
    height: 500px;
}

#ball{
    position: relative;
    top: 40px;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: rgb(114, 240, 214);
    border-radius: 50%;
    /* 动画简写属性：名称 持续时间 迭代次数 缓动函数 */
    animation: rulle 4s infinite linear;
    animation-play-state: paused; /* 初始状态为暂停 */
    text-align: center;
    line-height: 100px;
}

#roter{
    animation: roter 4s linear infinite;
    animation-play-state: paused; /* 初始状态为暂停 */
}

登录后复制

在上述CSS中：

animation: rulle 4s infinite linear; 定义了名为rulle的动画，持续4秒，无限循环（infinite），并以线性（linear）速度播放。
animation-play-state: paused; 是至关重要的一步，它确保了动画在页面加载完成后处于暂停状态，等待用户交互。