CSS过渡实现边框依次变色后反向恢复的技术问询

嘿，我刚好能帮你实现这个反向边框变色的动画效果！咱们可以结合CSS变量、关键帧动画和一点点JavaScript来完成，既保留原来的平滑过渡，又能实现你要的“相对边框变色时已变色边框恢复”的逻辑。

先看完整的实现代码：

HTML结构 #

<div class="box"></div>

CSS样式 #

.box {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  margin: 50px auto;
  /* 用CSS变量统一控制四个边框颜色 */
  --top-color: #ccc;
  --right-color: #ccc;
  --bottom-color: #ccc;
  --left-color: #ccc;
  border-top-color: var(--top-color);
  border-right-color: var(--right-color);
  border-bottom-color: var(--bottom-color);
  border-left-color: var(--left-color);
  /* 给边框颜色变化加平滑过渡 */
  transition: border-color 0.3s ease;
}

/* 正向动画：依次变色，到下边框时上边框恢复，左边框时右边框恢复 */
.box.animate-forward {
  animation: forwardAnimation 1.2s linear forwards;
}

/* 反向动画：逆向恢复+变色，和正向逻辑对应 */
.box.animate-backward {
  animation: backwardAnimation 1.2s linear forwards;
}

@keyframes forwardAnimation {
  0% {
    --top-color: #ccc;
    --right-color: #ccc;
    --bottom-color: #ccc;
    --left-color: #ccc;
  }
  25% {
    --top-color: #ff4444; /* 第一步：上边框变红 */
  }
  50% {
    --right-color: #ff4444; /* 第二步：右边框变红，上边框保持 */
  }
  75% {
    --bottom-color: #ff4444; /* 第三步：下边框变红，上边框恢复原色 */
    --top-color: #ccc;
  }
  100% {
    --left-color: #ff4444; /* 第四步：左边框变红，右边框恢复原色 */
    --right-color: #ccc;
  }
}

@keyframes backwardAnimation {
  0% {
    /* 承接正向动画结束的状态 */
    --left-color: #ff4444;
    --bottom-color: #ff4444;
    --right-color: #ccc;
    --top-color: #ccc;
  }
  25% {
    --left-color: #ccc; /* 第一步：左边框恢复，下边框保持 */
  }
  50% {
    --bottom-color: #ccc; /* 第二步：下边框恢复，上边框再次变红 */
    --top-color: #ff4444;
  }
  75% {
    --top-color: #ccc; /* 第三步：上边框恢复，右边框再次变红 */
    --right-color: #ff4444;
  }
  100% {
    --right-color: #ccc; /* 第四步：右边框恢复，回到初始状态 */
  }
}

JavaScript控制逻辑 #

const box = document.querySelector('.box');

// 鼠标hover时触发正向动画
box.addEventListener('mouseenter', () => {
  box.classList.add('animate-forward');
  
  // 3秒后自动触发反向动画（时间可以自己调整）
  setTimeout(() => {
    box.classList.remove('animate-forward');
    box.classList.add('animate-backward');
  }, 3000);
});

// 鼠标离开时重置所有动画状态
box.addEventListener('mouseleave', () => {
  box.classList.remove('animate-forward', 'animate-backward');
});

关键逻辑说明 #

1. CSS变量的使用：用--top-color这类变量来单独控制每个边框的颜色，这样我们可以在关键帧里精准修改某一个边框的颜色，同时不影响其他边框，还能保留平滑过渡效果。
2. 正向动画逻辑：完全按照你描述的顺序：上边框变色→右边框变色→下边框变色+上边框恢复→左边框变色+右边框恢复，每一步对应关键帧的25%节点。
3. 反向动画逻辑：承接正向动画结束的状态，逆向执行恢复和变色：左边框恢复→下边框恢复+上边框变色→上边框恢复+右边框变色→右边框恢复，完美对应正向的反向流程。
4. JavaScript控制时机：通过setTimeout在正向动画执行3秒后切换到反向动画，同时监听鼠标离开事件，确保鼠标移开时能重置状态。

如果你需要循环播放正向+反向动画，只需要在反向动画结束后再重新添加正向类就行，比如给.box加个animationend事件监听：

box.addEventListener('animationend', (e) => {
  if (e.animationName === 'backwardAnimation') {
    setTimeout(() => {
      box.classList.add('animate-forward');
    }, 1000); // 间隔1秒后再次执行正向动画
  }
});

这样就能实现循环往复的动画效果啦！

内容的提问来源于stack exchange，提问作者Jorel Amthor