如何創造平滑的 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%；確保漸變平滑過渡，沒有任何突然跳躍。
• 動畫循環通過三個關鍵幀，改變漸變的水平位置。此運動會產生顏色平滑變化的錯覺。

結果：

透過實施這些修改，您將實現優雅過渡的無縫漸變動畫通過指定的顏色。