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 サイトの他の関連記事を参照してください。