如何实现CSS渐变背景平滑旋转？现有代码仅两关键帧无过渡

问题根源 #

你当前的动画直接在关键帧中重复整个线性渐变定义，虽然浏览器会尝试对角度进行插值，但渐变内的多颜色断点会导致过渡过程中出现生硬的视觉断层，而非平滑旋转。

方案1：优化渐变角度动画（简单直接） #

通过仅动画linear-gradient的角度，避免重复整个渐变定义，让浏览器更高效地插值过渡：

@keyframes Fond_rotatif {
    0% {
        background-image: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
    100% {
        background-image: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
}

body {
    margin: 0;
    min-height: 100vh; /* 确保背景覆盖整个视口 */
    background-image: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    animation: Fond_rotatif 1.5s ease-out forwards; /* forwards保持动画结束状态 */
    background-size: cover;
}

方案2：伪元素旋转实现超平滑效果（推荐） #

将渐变背景放在body的伪元素上，通过旋转伪元素来实现更自然的平滑旋转，避免渐变断点的过渡问题：

<html>
<head>
    <meta charset="utf-8">
    <title>Page protégée</title>
</head>
<style>
    body {
        margin: 0;
        min-height: 100vh;
        position: relative; /* 为伪元素定位做准备 */
        overflow: hidden; /* 隐藏伪元素旋转时超出的部分 */
    }

    /* 用伪元素承载渐变背景 */
    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 150%; /* 放大尺寸避免旋转时出现空白 */
        height: 150%;
        background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        animation: Fond_rotatif 1.5s ease-out forwards;
        transform-origin: center center; /* 以中心为旋转原点 */
        z-index: -1; /* 伪元素放在内容下方 */
    }

    @keyframes Fond_rotatif {
        to {
            transform: rotate(25deg); /* 从110deg到135deg，差值25deg，直接旋转对应角度 */
        }
    }

    #box_reponse {
        margin-top: 30px;
        border: 1px solid black;
        border-radius: 10px;
        background-color: #b8b3bad1;
        box-shadow: 15px 15px 20px rgb(62, 62, 62);
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-right: 25px;
    }

    #Reponse {
        line-height: 35px;
        font-size: larger;
    }
</style>

<body>
    <div id="box_reponse"><span id="Reponse">This is a test</span></div>
</body>
</html>

关键优化点 #

• 方案2中通过旋转伪元素替代直接动画渐变角度，彻底避免了渐变断点导致的生硬过渡
• 设置min-height: 100vh确保背景覆盖整个页面
• 伪元素放大到150%并设置overflow: hidden，防止旋转时出现空白区域
• 使用forwards让动画结束后保持最终状态

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