使用纯CSS动画与JavaScript高效实现元素颜色闪烁效果

本文详细介绍了如何利用纯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触发

这种方法的核心在于两部分：

1. CSS部分： 使用@keyframes定义一个包含多个颜色状态的动画序列。
2. 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代码中：

标签： css javascript java jquery html js 浏览器 ssl ai css动画 css属性 回流