如何通过键盘按键控制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则让动画在页面加载后不立即启动。

标签： css javascript java html js win 网页设计 css动画 css样式 键盘事件 html元素