本文详细介绍了如何利用纯CSS的`@keyframes`动画和少量原生JavaScript代码，实现元素动态、重复的颜色闪烁效果，例如点击按钮后元素从红色闪烁到蓝色再回到红色。这种方法避免了依赖大型第三方库，通过添加和移除CSS类来触发和重置动画，确保了高效、轻量且可重复的动画行为。
实现动态颜色闪烁的挑战与解决方案
在网页开发中，我们经常需要为元素添加动态的视觉效果，例如在用户交互后让元素的颜色进行闪烁。一个常见的需求是，当用户点击按钮时，某个元素能从其原始颜色（如红色）过渡到另一种颜色（如蓝色），然后再平滑地回到原始颜色。
直接使用jQuery的.css()方法结合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属性定义的是当一个CSS属性的值发生变化时，如何平滑地从旧值过渡到新值。当你在同一个事件循环中连续设置属性时，浏览器可能只会应用最后一个状态，或者前一个过渡还没有开始就被新的过渡覆盖。要实现一个按时间序列执行的动画，我们需要更强大的机制。
立即学习“Java免费学习笔记（深入）”；
解决方案是利用CSS的@keyframes规则来定义一个完整的动画序列，并结合JavaScript来简单地触发和重置这个动画。这种方法将动画逻辑完全封装在CSS中，而JavaScript只负责控制动画的播放，从而实现了职责分离、性能优化且易于维护。
核心实现：CSS动画与JavaScript触发
这种方法的核心在于两部分：
- CSS部分： 使用@keyframes定义一个包含多个颜色状态的动画序列。
- JavaScript部分： 通过添加和移除一个CSS类来触发动画，并确保动画结束后能被再次触发。
1. 定义CSS动画
首先，我们需要在CSS中定义元素的初始状态，并创建一个@keyframes规则来描述颜色变化的完整序列。
body {
margin: 0;
background-color: #f00; /* 初始背景色：红色 */
display: flex;
min-height: 100vh;
}
/* 按钮样式（可选，仅为示例提供上下文）*/
.my-button {
margin: auto;
background-color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
transition: .2s;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}
.my-button:hover {
background-color: #ddd;
}
/* 定义触发动画的类 */
.active {
animation: bganim .6s; /* 应用名为bganim的动画，持续0.6秒 */
}
/* 定义颜色闪烁的关键帧动画 */
@keyframes bganim {
0%, /* 动画开始和结束时 */
100% {
background-color: #f00; /* 红色 */
}
50% {
background-color: #00f; /* 动画中间时：蓝色 */
}
}在上述CSS代码中：
- 我们为body设置了初始的background-color为红色（#f00）。
- @keyframes bganim定义了一个名为bganim的动画。
- 0%和100%处，背景色为红色（#f00）。
- 50%处，背景色变为蓝色（#00f）。
- .active类是触发动画的关键。当这个类被添加到元素上时，它会应用bganim动画，持续时间为0.6s。这意味着动画将从红色开始，在0.3秒时达到蓝色，然后在0.6秒时回到红色。
2. 使用JavaScript触发和重置动画
为了让动画在每次点击时都能重新播放，我们需要在动画结束时将触发动画的类移除。
const button = document.querySelector('.my-button');
const other = document.body; // 假设我们要动画的元素是body
button.addEventListener('click', function() {
other.classList.add('active'); // 点击时添加active类，触发动画
});
// 监听动画结束事件
other.addEventListener('animationend', function() {
other.classList.remove('active'); // 动画结束后移除active类，以便下次点击时能重新触发
});这段JavaScript代码做了以下几件事：
- 获取了触发动画的按钮元素（.my-button）和目标动画元素（这里是body）。
- 为按钮添加了一个click事件监听器。当按钮被点击时，它会给目标元素添加active类，从而触发CSS动画。
- 为目标元素添加了一个animationend事件监听器。当bganim动画完成时，这个事件会被触发，然后我们移除active类。移除active类是至关重要的一步，它将元素重置到未动画的状态，使得在下一次点击时，动画能够从头开始播放。
3. HTML结构
为了使上述CSS和JavaScript代码生效，我们需要一个基本的HTML结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色闪烁教程</title>
<link rel="stylesheet" href="style.css"> <!-- 引入你的CSS文件 -->
</head>
<body>
<button class="my-button">点击我</button>
<script src="script.js"></script> <!-- 引入你的JavaScript文件 -->
</body>
</html>将上面提供的CSS和JavaScript代码分别保存到style.css和script.js文件中，并确保在HTML中正确引入。
示例代码整合
style.css:
body {
margin: 0;
background-color: #f00; /* 初始背景色：红色 */
display: flex;
min-height: 100vh;
}
.my-button {
margin: auto;
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; /* 添加鼠标手势 */
}
.my-button:hover {
background-color: #ddd;
}
.active {
animation: bganim .6s forwards; /* 添加forwards保持动画结束状态，此处不加也可以因为100%是初始状态 */
}
@keyframes bganim {
0%,
100% {
background-color: #f00;
}
50% {
background-color: #00f;
}
}script.js:
const button = document.querySelector('.my-button');
const other = document.body; // 目标元素，这里是body
button.addEventListener('click', function() {
// 确保在添加类之前移除，以防快速点击导致动画行为异常
if (other.classList.contains('active')) {
other.classList.remove('active');
// 强制浏览器重新计算样式，以便立即重新触发动画
void other.offsetWidth;
}
other.classList.add('active');
});
other.addEventListener('animationend', function() {
other.classList.remove('active');
});在script.js中，我添加了一个额外的检查：if (other.classList.contains('active')) { other.classList.remove('active'); void other.offsetWidth; }。这在某些浏览器或快速点击场景下，可以更可靠地强制动画重新播放。void other.offsetWidth;是一个小技巧，通过请求元素的布局信息来强制浏览器进行一次重绘/回流，从而确保在添加active类时动画能够被正确地重新触发。
注意事项与总结
- 分离关注点： 这种方法将动画的复杂逻辑（时间、关键帧、属性变化）完全放在CSS中，而JavaScript只负责简单的触发控制，使得代码更清晰、易于维护。
- 性能优势： CSS动画通常由浏览器进行优化，并可能利用GPU进行渲染，提供比JavaScript驱动的动画更流畅的性能。
- 可重用性： 定义好的.active类和@keyframes动画可以轻松应用于页面上的任何其他元素，实现一致的动画效果。
- 动画属性： 示例中动画的是background-color，但你可以根据需要动画任何可动画的CSS属性，例如color（文字颜色）、transform（位置、大小、旋转）、opacity等。只需在@keyframes中修改相应的属性即可。
- animationend事件： 这是一个标准的Web API事件，当CSS动画完成其一次迭代时触发。对于无限循环的动画，它不会被触发。
- 兼容性： animationend事件和@keyframes动画在现代浏览器中都有良好的支持。对于旧版浏览器，可能需要添加厂商前缀（如-webkit-），但这在当前开发中已不常见。
通过这种纯CSS动画与JavaScript结合的方法，你可以灵活、高效地实现各种复杂的动态视觉效果，同时保持代码的简洁和高性能。
