如何创建平滑的 CSS 渐变动画？

CSS 渐变动画：一种平滑的方法

处理 CSS 渐变时，实现无缝动画有时会带来挑战。传统方法通常会导致颜色之间突然过渡，从而阻碍了所需的美学效果。

问题：

在提供的示例代码中，渐变立即从 1 开始变化位置到另一个。缺乏平滑度会破坏动画，使其显得脱节。

解决方案：背景定位

要纠正此问题，我们可以利用背景定位。通过动画渐变的背景位置，我们创建了平滑过渡的幻觉。

代码修改：

1. 定义渐变容器： 为包含该元素的元素分配一个 ID

<div>
<ol start="2"><li>
<strong>CSS 样式：</strong> 修改 CSS 如下：</li></ol>
<pre class="brush:php;toolbar:false">#gradient {
  ... (existing styles)
  background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
  background-size: 200% 200%;
}

3. 动画： 创建修改背景位置的关键帧动画

@keyframes Animation { 
  0% {background-position:10% 0%}
  50% {background-position:91% 100%}
  100% {background-position:10% 0%}
}

说明：

• 背景大小：200% 200%；确保渐变平滑过渡，没有任何突然跳跃。
• 动画循环通过三个关键帧，改变渐变的水平位置。此运动会产生颜色平滑变化的错觉。

结果：

通过实施这些修改，您将实现优雅过渡的无缝渐变动画通过指定的颜色。