外部ライブラリを使用せずに CSS で滑らかなグラデーションの背景アニメーションを作成するにはどうすればよいですか?

CSS を使用してグラデーションの背景をスムーズにアニメーション化する

途切れ途切れのグラデーション アニメーションで問題が発生し、滑らかに移行せずに突然変化する場合は、この記事を参照してください。のような外部ライブラリに依存せずにソリューションを提供します。 jQuery.

アニメーションの課題

グラデーション アニメーションを扱う場合、複数の色の間でスムーズな遷移を実現するのが難しい場合があります。デフォルトのアニメーション動作は多くの場合突然で、グラデーションがある位置から別の位置にジャンプします。

線形グラデーション背景

滑らかなグラデーション アニメーションを作成するには、次を使用します。線形グラデーションの背景を作成し、CSS アニメーションを使用して背景の位置を移動します。 CSS スタイルは次のようになります。

#gradient {
  /* Gradient background properties */
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(
    130deg,
    #ff7e00,
    #ffffff,
    #5cff00
  );
  background-size: 200% 200%;

  /* Animation properties */
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

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

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

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

HTML 実装

HTML では、div 要素を作成し、「gradient」クラスを適用する必要があります。 :

<div>

CSS アニメーションを使用して背景の位置を操作することで、流体を作成できますグラデーションアニメーション。このアプローチにより、突然のジャンプがなくなり、色間のスムーズで段階的な移行が実現します。

以上が外部ライブラリを使用せずに CSS で滑らかなグラデーションの背景アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。