CSS背景动画仅像素值生效 如何实现宽度自适应流畅动画

问题原因 #

原有实现用固定像素值定义background-position动画终点，只能适配宽度固定为400px的元素。直接改用百分比值失效的核心原因是：CSS百分比形式的background-position计算基准是「容器宽度与背景宽度的差值」，默认背景尺寸和容器等宽时差值为0，无论设置什么百分比值背景都不会产生位移；手动调整background-size时也很难对齐循环首尾的渐变状态，容易出现跳帧、循环断层问题。

可直接复用的自适应实现 #

核心思路是把渐变做在2倍容器宽度的伪元素上，用transform属性实现位移动画，transform的百分比基准是元素自身尺寸，天然适配任意宽度，且动画走GPU合成，流畅度更高。

<style type="text/css">
  * {
    box-sizing: border-box;
  }

  .fancy {
    position: relative;
    max-width: 100%;
    padding: 15px;
    text-align: center;
    overflow: hidden;
  }

  .fancy::before, .fancy::after {
    content: "";
    position: absolute;
    left: 0;
    width: 200%;
    height: 1px;
  }

  .fancy::before {
    top: 0;
    background: linear-gradient(to right, #FFFFFF, #168DBF 35%);
    animation: fancy-top 2s linear infinite;
  }

  .fancy::after {
    bottom: 0;
    background: linear-gradient(to left, #FFFFFF, #168DBF 35%);
    animation: fancy-bottom 2s linear infinite;
  }

  @keyframes fancy-top {
    0%    { transform: translateX(-50%); }
    100%  { transform: translateX(0); }
  }

  @keyframes fancy-bottom {
    0%    { transform: translateX(0); }
    100%  { transform: translateX(-50%); }
  }
</style>
<h1 class="fancy">Fancy Heading</h1>

实现说明 #

• 伪元素宽度设为容器的200%，渐变长度对应调整为原比例的一半，保证视觉效果和原固定像素版本完全一致
• 位移动画距离固定为伪元素自身宽度的50%（刚好等于1个容器宽度），循环首尾状态完全重合，无跳变断层
• 父元素加overflow: hidden裁剪掉伪元素超出容器的部分，不会影响其他布局
• 无任何硬编码像素值，元素宽度任意变化时动画都能正常运行

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