スムーズな CSS グラデーション アニメーションを作成するにはどうすればよいですか?

CSS グラデーションのアニメーション: スムーズなアプローチ

CSS グラデーションを扱う場合、シームレスなアニメーションを実現することが困難になる場合があります。従来の方法では、多くの場合、色間の突然の遷移が発生し、目的の美的効果が妨げられます。

問題:

提供されたサンプル コードでは、グラデーションが 1 つから瞬時に変化します。別の位置に。この滑らかさの欠如によりアニメーションが乱れ、ばらばらに見えます。

解決策: 背景の配置

この問題を修正するには、背景の配置を利用します。グラデーションの背景の位置をアニメーション化することで、スムーズな遷移の錯覚を作成します。

コードの変更:

1. グラデーション コンテナの定義: を含む要素に ID を割り当てます。 gradient.

<div>

2. CSS スタイル: CSS を次のように変更します:

#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%;急激にジャンプすることなく、グラデーションがスムーズに移行するようにします。
• アニメーションは 3 つのキーフレームを循環して、グラデーションの水平位置を変更します。この動きにより、色のスムーズな変化のような錯覚が生まれます。

結果:

これらの変更を実装すると、滑らかに遷移するシームレスなグラデーション アニメーションが実現します。指定された色を通して。

以上がスムーズな CSS グラデーション アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。