本教程详细讲解如何利用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 将是我们动画的目标。
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- 等前缀，但现在通常不再是必需的。
总结
通过将CSS @keyframes 动画与JavaScript的类切换机制结合，我们能够高效、灵活地实现复杂的元素动画效果，例如本文中的颜色闪烁。这种方法不仅避免了对大型库的依赖，还提升了动画的性能和代码的可维护性。掌握这种模式是现代前端开发中实现丰富用户交互的重要技能。
