本教程详细阐述如何通过纯css动画结合少量javascript代码，实现元素动态、可重复的颜色闪烁效果，避免引入大型第三方库。核心思想是利用css的`@keyframes`定义完整的动画序列，并通过javascript在点击事件中添加和移除控制动画的css类，同时监听`animationend`事件以确保动画的可重复性。这种方法提供了高效、灵活且易于维护的解决方案。
在前端开发中，我们经常需要为用户界面添加动态效果，例如当用户点击按钮时，某个元素能够短暂地改变颜色，然后恢复到初始状态。直接使用CSS的transition属性配合JavaScript来尝试实现这种“闪烁”或“先变蓝再变红”的序列效果，往往会遇到挑战。例如，连续设置两个css()调用来改变颜色并期望它们按顺序执行过渡，通常只会显示最后一个状态，因为浏览器在同一事件循环中会合并这些样式更新。
为了高效且优雅地实现这类动态效果，特别是需要重复触发的动画，推荐的方法是利用CSS的@keyframes动画结合JavaScript来控制动画的播放。这种方法将动画的定义与触发机制分离，使得代码更清晰、更易于维护，并且性能通常也更好。
核心概念：CSS动画与JavaScript触发
该方法的核心在于：
- CSS @keyframes定义动画序列：在CSS中定义一个完整的动画序列，包括起始、中间和结束状态。这使得颜色从初始状态到目标状态再回到初始状态的过程可以在CSS中一次性描述。
- JavaScript控制动画播放：通过JavaScript在用户交互时（例如点击按钮）为目标元素添加一个特定的CSS类。这个类会触发之前定义好的CSS动画。
- 监听animationend事件：当动画播放完毕后，通过监听animationend事件，JavaScript可以移除之前添加的CSS类，从而使动画可以再次被触发。
实施步骤
我们将通过一个示例来演示如何实现点击按钮时，页面背景色从红色闪烁到蓝色再回到红色的效果。
立即学习“Java免费学习笔记（深入）”；
1. HTML结构
首先，我们需要一个按钮来触发动画，以及一个目标元素（这里以body为例）来显示颜色变化。
<button class="my-button">点击我</button>
2. 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;
}
/* 定义闪烁动画 */
@keyframes bganim {
0%, 100% {
background-color: #f00; /* 动画开始和结束时为红色 */
}
50% {
background-color: #00f; /* 动画中途（50%）时为蓝色 */
}
}
/* 激活动画的类 */
.active {
animation: bganim .6s forwards; /* 应用bganim动画，持续0.6秒，并保持动画结束状态 */
}CSS解释：
- body：设置初始背景色为红色（#f00）。
- @keyframes bganim：定义了一个名为bganim的关键帧动画。
- 0%, 100%：表示动画开始和结束时，background-color为红色。
- 50%：表示动画进行到一半时，background-color变为蓝色（#00f）。
- 这个定义确保了颜色从红 -> 蓝 -> 红的完整循环。
- .active：这是一个控制类。当这个类被添加到元素上时，它会触发bganim动画。animation: bganim .6s forwards;表示动画名为bganim，持续时间为0.6秒，forwards确保动画结束后元素保持在动画的最终状态（虽然这里100%是初始状态，但forwards通常是一个好习惯）。
3. JavaScript控制逻辑
最后，使用JavaScript来监听按钮点击事件，并动态添加/移除.active类。
const button = document.querySelector('.my-button');
const targetElement = document.body; // 动画目标元素
button.addEventListener('click', function() {
// 如果动画正在进行，先移除类再添加，确保动画可以重新触发
if (targetElement.classList.contains('active')) {
targetElement.classList.remove('active');
// 强制浏览器重绘以重新开始动画
void targetElement.offsetWidth;
}
targetElement.classList.add('active');
});
targetElement.addEventListener('animationend', function() {
targetElement.classList.remove('active');
});JavaScript解释：
- document.querySelector('.my-button')：获取按钮元素。
- document.body：指定动画的目标元素为body。
- button.addEventListener('click', function() { ... })：当按钮被点击时执行回调函数。
- 在回调函数内部，我们首先检查targetElement是否已经包含active类。如果包含，说明动画可能正在进行或刚结束，为了确保动画能够重新播放，我们先移除active类。
- void targetElement.offsetWidth;：这是一个小技巧，通过访问元素的某个属性（如offsetWidth）来强制浏览器进行重绘，从而“重置”动画状态，确保即使在动画结束前再次点击也能重新播放。
- targetElement.classList.add('active')：为目标元素添加active类，从而触发CSS动画。
- targetElement.addEventListener('animationend', function() { ... })：监听目标元素的animationend事件。当动画播放完毕后，这个事件会被触发。
- targetElement.classList.remove('active')：在动画结束后移除active类。这是关键一步，它使得动画可以再次被触发，因为下次点击时，active类可以重新被添加。
完整示例代码
将上述HTML、CSS和JavaScript代码组合，即可得到一个完整的、可运行的示例：
<!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>
<style>
body {
margin: 0;
background-color: #f00; /* 初始背景色：红色 */
display: flex;
min-height: 100vh;
transition: background-color 0.2s ease; /* 为非动画状态的颜色变化添加过渡 */
}
.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;
}
/* 定义闪烁动画 */
@keyframes bganim {
0%, 100% {
background-color: #f00; /* 动画开始和结束时为红色 */
}
50% {
background-color: #00f; /* 动画中途（50%）时为蓝色 */
}
}
/* 激活动画的类 */
.active {
animation: bganim .6s forwards; /* 应用bganim动画，持续0.6秒，并保持动画结束状态 */
}
</style>
</head>
<body>
<button class="my-button">点击我</button>
<script>
const button = document.querySelector('.my-button');
const targetElement = document.body; // 动画目标元素
button.addEventListener('click', function() {
// 如果动画正在进行，先移除类再添加，确保动画可以重新触发
if (targetElement.classList.contains('active')) {
targetElement.classList.remove('active');
// 强制浏览器重绘以重新开始动画
void targetElement.offsetWidth;
}
targetElement.classList.add('active');
});
targetElement.addEventListener('animationend', function() {
targetElement.classList.remove('active');
});
</script>
</body>
</html>注意事项与总结
- 分离关注点：这种方法将动画的视觉表现（CSS）与动画的触发逻辑（JavaScript）清晰地分离，提高了代码的可读性和可维护性。
- 性能优化：CSS动画通常由浏览器进行硬件加速，相比于通过JavaScript频繁修改样式属性，性能表现更优。
- 可重复性：通过监听animationend事件并在动画结束后移除控制类，确保了动画可以被反复触发，而不会因为类一直存在而无法再次播放。
- 强制重绘：在某些情况下，如果动画在结束前被再次触发，浏览器可能不会立即重新播放动画。void element.offsetWidth;（或offsetHeight、scrollWidth等）这个小技巧可以强制浏览器重新计算布局并重绘，从而确保动画能够立即重新开始。
- 目标元素：示例中以body作为目标元素，但你可以将.active类和animationend监听器应用于任何你希望进行动画的元素。
- 动画属性：@keyframes不仅可以动画background-color，还可以动画几乎所有可动画的CSS属性，如color、transform、opacity、width、height等。只需在@keyframes中定义相应的属性变化即可。
通过上述方法，我们可以轻松实现各种复杂的、可重复的动态UI效果，而无需依赖大型JavaScript库，保持项目的轻量和高效。
