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

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

Mary-Kate Olsen

リリース： 2024-12-12 22:01:14

オリジナル

481 人が閲覧しました

How Can I Create Smooth CSS Gradient Animations Without Abrupt Position Changes?

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

ログイン後にコピー

このコード内: