CSS アニメーションを永久に実行させるにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS アニメーションを永久に実行させるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-15 21:25:03

オリジナル

648 人が閲覧しました

How to Make CSS Animations Run Forever?

CSS で画像を永遠にアニメーションさせる方法

この記事では、CSS3 アニメーションを無期限に実行するという、CSS3 アニメーションに関するよくある質問に対処します。

The Challenge

CSS3 アニメーションを使用してスライドショーとして表示したい一連の写真があるとします。これらの写真の間をスムーズに遷移させます。ただし、最後の写真がフェードアウトしてページがリロードされ、実質的にスライドショーが再開されるデフォルトの動作には満足していません。

解決策

シームレスなループアニメーションを実現するには、次のことが必要です。 CSS を変更して、アニメーションを継続的に繰り返すように指定します。デフォルトでは、CSS アニメーションは 1 回だけ実行されるように設定されています。

CSS に追加する重要なプロパティは animation-iteration-count です。以下に例を示します。

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

ログイン後にコピー

animation-iteration-count を infinite に設定すると、アニメーションが無限にループし続け、写真間のシームレスな遷移が作成されます。 .

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