CSS で滑らかなグラデーション アニメーションを実現するにはどうすればよいですか?

CSS を使用したスムーズなグラデーション アニメーションの実装

質問: 不自然なグラデーション アニメーション

CSS グラデーションの領域には、長年悩まされている課題があります。多くの開発者にとって、アニメーション中のグラデーションのぎくしゃくした突然の動き。この不快な効果は、アニメーション ステップごとにグラデーションの位置が突然変化するときに発生します。

次の例を考えてみましょう:

@keyframes gra {
  0% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
  }
  50% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
  }
  100% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
  }
}

このコードでは、グラデーションの位置が 3 つのフレーム間で突然変化します。ぎくしゃくしたアニメーションになります。目標は、色の進行の自然な流れを反映して、シームレスでスムーズなトランジションを実現することです。

答え: グラデーション アニメーションの習得

スムーズなグラデーション アニメーションの秘密を解き明かすために、別のアプローチを導入します。 。グラデーションの位置を直接変更する代わりに、そのサイズを変更します。この微妙な変更により、アニメーションの流動性が大幅に向上しました。

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

  -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%;
  }
}

この改善されたコードでは、background-size プロパティを操作するようになりました。アニメーションは小さなグラデーション サイズから始まり、グラデーションが要素全体を覆うまで徐々にサイズを大きくしていきます。これにより、要素全体に色がシームレスに流れるように見える効果が生まれます。

この技術を採用することで、優雅で魅力的なグラデーション アニメーションが実現し、優雅さと動きのタッチでデザインに命を吹き込みます。

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