CSS3 背景画像がアニメーションしないのはなぜですか?

CSS3 を使用した背景画像のアニメーション: トラブルシューティング ガイド

CSS3 を使用して背景画像をアニメーション化しようとすると、予期した動作を妨げる問題が発生する場合があります。これらの問題を修正するために、提供されたコードを詳しく調べて、潜在的な誤解を特定しましょう。

あなたが提供した例では、CSS キーフレームの誤った使用が原因でアニメーションが失敗しているようです。 「@-webkit-keyframes」ルール構文は、2020 CSS 仕様で非推奨になりました。この問題を解決するには、代わりに標準化された「@keyframes」構文を使用するようにコードを更新する必要があります。

意図したとおりに動作する更新されたスニペットは次のとおりです。

@keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  animation-name: test;
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: linear;
}

忘れずに更新してください。ブラウザの開発ツールまたは CSS ファイルのアニメーション接頭辞を「@-webkit-keyframes」ではなく「@keyframes test」にします。 test."

これらの調整により、背景画像は意図したとおりにスムーズにアニメーションするはずです。

以上がCSS3 背景画像がアニメーションしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。