如何消除CSS渐变动画生硬跳转，实现平滑循环？

纯CSS3解决方案 #

你的代码出现跳转问题，核心原因是渐变的起始/结束状态未衔接，且background-position的目标值与渐变尺寸不匹配。以下是修正后的纯CSS方案，实现无中断平滑循环：

修正代码 #

div {
    width: 500px;
    height: 500px;
    /* 让渐变从起始色开始，平滑过渡到所有目标色后回到起始色，保证循环衔接 */
    background: linear-gradient(180deg, #FF3155, #FFAF42, #FFED5E, #FF3155);
    /* 设置渐变高度为容器的2倍，确保动画移动时能覆盖完整的渐变循环 */
    background-size: 100% 200%;
    /* infinite linear 保证循环匀速 */
    animation: smoothGradient 5s infinite linear;
}

@keyframes smoothGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        /* 移动距离为容器高度（即渐变高度的一半），结束时刚好显示渐变的后半段，与起始状态衔接 */
        background-position: 0% 100%;
    }
}

关键原理 #

1. 渐变首尾颜色一致：让渐变从#FF3155开始，经过中间色后回到#FF3155，避免循环时颜色突变。
2. background-size: 100% 200%：将渐变高度设为容器的2倍，这样动画移动一个容器高度时，刚好展示完整的渐变周期。
3. 动画终点匹配：background-position从0% 0%移动到0% 100%，结束状态的渐变后半段与起始状态的前半段无缝衔接，循环无跳转。

JS方案（灵活可控） #

如果需要更动态的颜色变化（比如实时RGB渐变），可以用JS结合requestAnimationFrame实现细腻的平滑过渡：

代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Gradient</title>
    <style>
        div {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const box = document.querySelector('div');
        let hue = 0;

        function animateGradient() {
            // 用HSL实现连续色相渐变，自动循环无中断（HSL色相0-360度线性循环）
            const gradient = `linear-gradient(180deg, 
                hsl(${hue}, 100%, 60%), 
                hsl(${hue + 120}, 100%, 60%), 
                hsl(${hue + 240}, 100%, 60%), 
                hsl(${hue}, 100%, 60%)
            )`;
            box.style.background = gradient;
            // 控制渐变速度，值越小越慢
            hue = (hue + 0.5) % 360;
            requestAnimationFrame(animateGradient);
        }

        animateGradient();
    </script>
</body>
</html>

关键说明 #

• 用HSL替代RGB：色相（hue）从0到360度循环，天然实现颜色的平滑过渡，无需手动计算RGB各通道的增量。
• requestAnimationFrame：保证动画与浏览器刷新同步，避免卡顿。
• 若需RGB渐变，可以预先定义关键颜色数组，通过插值计算每个帧的RGB值，再拼接成渐变字符串（HSL是更简洁的方案）。

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