CSS动画问题：从左到右填充div时颜色跳转的原因与解决方法

嘿，我帮你排查出问题所在了——你的动画在接近末端时出现跳转，是因为关键帧里的操作逻辑有误，咱们一步步拆解并修复：

问题成因 #

你当前的代码里，动画初始状态的背景是linear-gradient(to right, black 50%, transparent 50%)，并且设置了background-size: 200% 100%和background-position: right bottom，这个思路是对的——用两倍宽度的渐变，通过移动位置实现填充。

但问题出在@keyframes的100%关键帧里：你同时修改了background-position和整个background属性，直接把渐变换成了linear-gradient(to right, black 100%, black 0%)（这其实就是全黑背景）。浏览器无法在“带透明的渐变”和“全黑渐变”之间做平滑的动画插值，所以在动画接近结束时会突然跳转，直接切换成全黑。

修复方案 #

核心思路是只通过调整background-position来实现填充效果，不要在关键帧里替换整个背景渐变——初始的渐变已经包含了我们需要的黑色和透明部分，只需要移动背景位置就能完成平滑填充。

修改后的完整代码如下：

.outer { margin: 50px; }
.button {
  border: 1px solid black;
  border-radius: 3px;
  width: 100px;
  height: 30px;
  display: block;
  /* 初始渐变：左半部分黑色，右半部分透明，背景宽度设为容器的2倍 */
  background: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 200% 100%;
  /* 初始位置：让透明区域对齐容器右侧，此时容器显示透明 */
  background-position: right bottom;
  /* 动画设置：3秒时长，延迟1秒执行，结束后保持最终状态 */
  animation: makeItfadeIn 3s 1s forwards;
}

/* 关键帧只需要调整背景位置，让黑色区域逐渐覆盖容器 */
@-webkit-keyframes makeItfadeIn {
  100% {
    background-position: left bottom;
  }
}
@keyframes makeItfadeIn {
  100% {
    background-position: left bottom;
  }
}

<div class="outer">
  <div class="button"></div>
</div>

原理说明 #

• 初始渐变的宽度是容器的2倍（background-size: 200% 100%），左半黑右半透明。
• 初始位置right bottom让渐变的透明部分刚好填满容器，所以一开始看不到黑色。
• 动画过程中，background-position从right bottom移动到left bottom，相当于把渐变向左平移了整个容器的宽度，黑色部分会逐渐从左到右填充整个容器，全程平滑无跳转。

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