突然の位置変更を行わずに滑らかな CSS グラデーション アニメーションを作成するにはどうすればよいですか?

CSS を使用したグラデーションのアニメーション

特定のシナリオでは、シームレスなグラデーション アニメーションを実現することが困難になる場合があります。注目すべき問題の 1 つは、アニメーション中に位置が突然変化することです。提供されているコードは、この問題を示しています。

.animated {
  animation: gra 5s infinite;
  animation-direction: reverse;
}

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

解決策

この問題を解決するには、CSS のbackground-position プロパティをキーフレームと組み合わせて利用し、よりスムーズな画像を作成できます。アニメーション。次のコードを考えてみましょう:

#gradient
{
    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 プロパティは、グラデーションのシームレスなループを保証します。
• background-position プロパティは、コントロールを制御します。グラデーションの開始位置。
• キーフレームは、background-position プロパティをアニメーション化して、錯覚を作成します。

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