使用纯CSS动画和JavaScript实现元素颜色闪烁效果-html教程-PHP中文网

使用纯css动画和javascript实现元素颜色闪烁效果

本教程详细讲解如何利用CSS `@keyframes` 动画和少量原生JavaScript，实现点击按钮时元素颜色（例如从红到蓝再回红）的平滑闪烁效果，避免引入大型第三方库。通过动态添加和移除CSS类，我们能精确控制动画的触发与重复，实现高性能且可维护的交互体验。

引言：理解颜色动画的挑战

在网页开发中，我们经常需要实现元素在用户交互时（如点击按钮）进行视觉反馈，其中颜色变化是一种常见的需求。例如，当用户点击一个按钮时，另一个元素需要从红色闪烁到蓝色，然后立即变回红色。

尝试使用jQuery的 .css() 方法配合CSS transition 来实现这种序列动画时，开发者常会遇到困难。直接连续调用 .css() 设置颜色，如先设置为蓝色再设置为红色，会导致浏览器瞬间应用最后一个样式，从而跳过中间的蓝色状态，或者即使有 transition 也可能因为样式被立即覆盖而无法观察到完整的过渡效果。例如：

// 这种方法通常无法实现预期的“先蓝后红”序列动画
$(".my-button").click(function() {        
    $(".other-element").css("transition", "color .3s").css("color", "blue");
    // 这一行会立即覆盖上一行设置的蓝色，导致只显示红色
    $(".other-element").css("transition", "color .6s").css("color", "red");
});

登录后复制

这种方法之所以无效，是因为浏览器在短时间内接收到多个样式指令时，会优先渲染最终的样式。transition 只能处理两个状态之间的平滑过渡，而无法直接定义一个多步的、带有时间序列的复杂动画。为了实现更复杂的动画序列，并且避免引入如jQuery UI animate() 这样的大型库，我们可以转而利用CSS原生的 @keyframes 动画结合少量JavaScript来控制。

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

核心策略：CSS动画与JavaScript类切换

解决上述问题的核心在于将复杂的动画逻辑完全定义在CSS中，然后通过JavaScript在适当的时机动态地添加或移除一个CSS类来触发和重置这个动画。这种方法充分利用了CSS动画的性能优势和JavaScript的事件控制能力。

基本思路：

CSS定义动画： 使用 @keyframes 规则定义一个包含多个颜色状态和时间点的动画序列。
CSS定义触发类： 创建一个CSS类，当这个类被添加到元素上时，就应用上面定义的动画。
JavaScript控制：
- 监听用户事件（如按钮点击）。
- 在事件触发时，为目标元素添加动画触发类。
- 监听动画结束事件 (animationend)，在动画完成后移除该类，以便下次能够再次触发。

实现步骤

下面我们将通过一个具体的例子来演示如何实现点击按钮后，一个元素背景色从红色闪烁到蓝色，再回到红色的效果。

1. 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动画与JS控制颜色闪烁</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="my-button">点击我</button>
    <div class="other-element"></div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

这里我们创建了一个 button 和一个 div 元素。div.other-element 将是我们动画的目标。

Remover

几秒钟去除图中不需要的元素

304

查看详情

2. CSS动画定义

接下来，在 style.css 文件中定义动画和相关样式。

body {
    margin: 0;
    display: flex;
    flex-direction: column; /* 垂直布局 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    min-height: 100vh;
    background-color: #f00; /* 默认背景色为红色 */
    font-family: Arial, sans-serif;
}

.my-button {
    background-color: white;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    transition: .2s;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
    cursor: pointer;
    margin-bottom: 20px; /* 按钮和动画元素之间的间距 */
}

.my-button:hover {
    background-color: #ddd;
}

.other-element {
    width: 100px;
    height: 100px;
    background-color: inherit; /* 继承body的默认背景色 */
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-weight: bold;
}

/* 定义动画关键帧 */
@keyframes flashColor {
    0% { background-color: #f00; }   /* 动画开始时为红色 */
    50% { background-color: #00f; }   /* 动画进行到一半时变为蓝色 */
    100% { background-color: #f00; }  /* 动画结束时回到红色 */
}

/* 定义一个类来触发动画 */
.active-flash {
    animation: flashColor .6s forwards; /* 应用flashColor动画，时长0.6秒，forwards保持动画结束状态 */
}

登录后复制

关键点解释：

@keyframes flashColor: 定义了一个名为 flashColor 的动画。
- 0%：动画开始时，背景色为红色 (#f00)。
- 50%：动画进行到一半时，背景色变为蓝色 (#00f)。
- 100%：动画结束时，背景色再次回到红色 (#f00)。
.active-flash: 这是一个我们将通过JavaScript动态添加和移除的类。当它被添加到元素上时，animation: flashColor .6s forwards; 就会被应用，触发 flashColor 动画，动画时长为0.6秒。forwards 关键字确保动画结束后元素保持在动画最后一帧的样式（在本例中是红色）。

3. JavaScript控制逻辑

最后，在 script.js 文件中编写JavaScript代码来控制动画的触发。

document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('.my-button');
    const otherElement = document.querySelector('.other-element'); // 目标元素

    // 监听按钮点击事件
    button.addEventListener('click', function() {
        // 如果动画正在进行，先移除类以重置动画
        if (otherElement.classList.contains('active-flash')) {
            otherElement.classList.remove('active-flash');
            // 强制浏览器重绘以确保动画能立即重新开始
            void otherElement.offsetWidth; 
        }
        // 添加类以触发动画
        otherElement.classList.add('active-flash');
    });

    // 监听动画结束事件
    otherElement.addEventListener('animationend', function() {
        // 动画结束后移除类，以便下次点击时可以重新触发动画
        otherElement.classList.remove('active-flash');
    });
});

登录后复制

关键点解释：

DOMContentLoaded: 确保DOM完全加载后再执行JavaScript。
button.addEventListener('click', ...): 当按钮被点击时：
- 首先检查 otherElement 是否已经有 active-flash 类。如果有，说明动画可能正在进行或刚刚结束但尚未移除类。我们先移除它，然后通过 void otherElement.offsetWidth; 强制浏览器重绘/回流，这是一种常见的技巧，用于在移除类后立即重新添加类时，确保动画能够重新开始播放而不是被忽略。
- otherElement.classList.add('active-flash'): 为目标元素添加 active-flash 类，从而触发CSS动画。
otherElement.addEventListener('animationend', ...): 当 flashColor 动画在 otherElement 上播放完毕时，会触发 animationend 事件。
- otherElement.classList.remove('active-flash'): 在动画结束后移除 active-flash 类。这是至关重要的一步，它将元素恢复到动画前的状态（或由 forwards 保持的最终状态），使得下次点击按钮时动画可以再次完整地播放。

工作原理深度解析

这种方法的强大之处在于它巧妙地分离了关注点：

CSS负责“如何动”： @keyframes 精确定义了动画的每一个阶段、持续时间、缓动函数等。这使得动画本身高度可配置和重用。
JavaScript负责“何时动”： JavaScript只负责在用户交互发生时，通过添加/移除CSS类来控制动画的开始和结束。

animationend 事件是实现可重复动画的关键。如果没有这个事件监听器来移除 active-flash 类，那么在第一次动画播放完毕后，otherElement 会一直带有 active-flash 类。此时，即使再次点击按钮，因为元素已经有了这个类，浏览器会认为没有发生样式变化，动画就不会再次播放。通过在动画结束后移除该类，我们将元素重置为“未动画”状态，从而为下一次动画做好准备。

与CSS transition 相比，animation 提供了更强大的多步动画控制能力。transition 只能在两个状态之间平滑过渡，而 animation 可以定义任意数量的关键帧，实现复杂的序列效果。

优点与注意事项

优点：

轻量级： 无需引入jQuery UI等大型第三方动画库，减少页面加载负担。
高性能： CSS动画由浏览器原生引擎处理，通常比JavaScript驱动的动画更流畅、性能更优。
职责分离： 动画样式（CSS）与交互逻辑（JavaScript）清晰分离，代码更易于维护和理解。
可重复性： 通过 animationend 事件监听器，动画可以被轻松地多次触发。
灵活性： @keyframes 允许定义任意复杂的动画序列，包括颜色、位置、大小、透明度等多种属性的组合变化。

注意事项：

强制重绘： 在JavaScript中，如果需要立即重置并重新播放动画（即在动画结束前再次触发），有时需要强制浏览器重绘或回流。void element.offsetWidth; 是一种常用的技巧，它通过请求元素的布局信息来强制浏览器进行一次重绘。
动画时长： 确保 animationend 事件的监听器能够被正确触发。如果动画时长极短或动画被中断，可能会影响 animationend 的可靠性。
目标元素： 示例中动画的是背景色，但你可以通过修改 @keyframes 来动画其他CSS属性，如 color (文字颜色)、transform (位移、旋转、缩放) 或 opacity (透明度)。
浏览器兼容性： 现代浏览器对CSS Animation的支持良好。对于旧版浏览器，可能需要添加 -webkit- 等前缀，但现在通常不再是必需的。