垂直CSS线性渐变动画background-position百分比值失效问题求助

问题描述 #

想要实现垂直方向的CSS线性渐变动画，但keyframes中的background-position使用百分比值时无法生效，仅使用px值时能正常运行。由于元素的宽高会发生变化，百分比值显然更适配，可让background-position跟随元素尺寸变化。若将渐变方向设为90deg，动画可正常运行，但渐变会变为水平方向而非垂直方向。

原代码示例 #

div {
  width: 50px;
  height: 150px;
  background: linear-gradient(0deg, yellow, orange, red, violet, purple, blue, yellow);
  animation: color 5s linear infinite;
  margin: 50px auto;
}

@keyframes color {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 200%; /* 不生效 */
        /*background-position: 0 -150px; -> 可运行但适配性差 */
    }
}

<div></div>

问题原因 #

当线性渐变方向为0deg（垂直方向）时，background-position的百分比值是相对于元素宽度计算的，而非高度，这就导致垂直方向的百分比偏移无法产生预期的位移效果。而将渐变方向设为90deg（水平方向）时，百分比值会基于元素高度计算，因此动画能正常运行，但渐变方向不符合需求。

解决方案 #

通过设置background-size定义渐变的垂直长度，同时明确指定background-position的垂直方向偏移值，让百分比基于元素高度生效：

div {
  width: 50px;
  height: 150px;
  background: linear-gradient(0deg, yellow, orange, red, violet, purple, blue, yellow);
  background-size: 100% 200%; /* 将渐变的垂直长度设为元素高度的2倍 */
  animation: color 5s linear infinite;
  margin: 50px auto;
}

@keyframes color {
    0% {
        background-position: 0% 0%; /* 初始位置：水平0%，垂直0% */
    }
    100% {
        background-position: 0% 100%; /* 结束位置：水平0%，垂直100% */
    }
}

原理说明 #

• background-size: 100% 200%：让渐变的宽度匹配元素宽度，高度为元素高度的2倍，确保渐变有足够的长度实现滚动动画。
• background-position明确指定水平和垂直方向的百分比：垂直方向从0%偏移到100%，刚好让渐变向上滚动一个元素高度的距离，实现无缝循环的垂直动画。由于使用百分比，元素尺寸变化时动画会自动适配，无需手动调整数值。

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