如何在HTML中为div实现同步移动与边缘颜色突变动画（无需JS）

问题分析 #

你的代码中，left 和 background 属性从 0% 到 100% 同时进行平滑过渡，导致颜色也跟着渐变。要实现颜色突变，需要让背景色在动画接近结束前保持不变，仅在到达屏幕边缘的瞬间切换。

解决方案1：单动画关键帧拆分 #

修改 @keyframes，在接近结束的关键帧保留蓝色背景，仅在最后一帧切换红色：

<div class="move-me">no steps</div>

.move-me {
  display: inline-block;
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
  animation: move-in-steps 8s infinite linear; /* linear保证移动匀速平滑 */
}

body {
  padding: 20px;
}

@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }
  99.9% {
    left: 100%;
    background: blue; /* 动画接近结束时仍保持蓝色 */
  }
  100% {
    left: 100%;
    background: red; /* 到达边缘瞬间切换红色 */
  }
}

解决方案2：拆分独立动画 #

将移动和颜色变化拆分为两个独立动画，逻辑更清晰：

.move-me {
  display: inline-block;
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
  /* 移动动画用linear保证平滑，颜色动画用steps(1)强制突变 */
  animation: move 8s infinite linear, color-flip 8s infinite steps(1);
}

body {
  padding: 20px;
}

/* 负责平滑移动的动画 */
@keyframes move {
  0% { left: 0; }
  100% { left: 100%; }
}

/* 负责颜色突变的动画 */
@keyframes color-flip {
  0%, 99.9% { background: blue; }
  100% { background: red; }
}

原理说明 #

两种方案核心都是让背景色在动画周期内绝大多数时间保持蓝色，仅在到达屏幕边缘的最后一刻切换为红色。方案2通过 steps(1) 强制颜色动画不进行过渡，直接跳变，进一步确保突变效果。

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