CSS3 アニメーションを無限にループさせるにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-19 07:10:03
オリジナル
389 人が閲覧しました

How Can I Make CSS3 Animations Loop Indefinitely?

CSS3 アニメーションを無限にループする

CSS3 アニメーションは、Web ページ上の要素をアニメーション化する便利な手段を提供します。ただし、デフォルトでは、これらのアニメーションは 1 回だけ再生されます。アニメーションを連続的にループさせるには、特定の CSS プロパティを使用する必要があります。

チャレンジ

一連の画像をフェードインおよびフェードアウトすることなく、連続的に実行したいと考えています。ページをリロードします。

解決策

CSS3 アニメーションの無限ループを有効にする鍵は、animation-iteration-count プロパティにあります。このプロパティは、アニメーションが停止するまでに繰り返す回数を指定します。このプロパティを無限に設定すると、アニメーションを無期限に実行するようにブラウザーに指示できます。

提供されたコードでは、CSS クラスを使用して複数のイメージ コンテナーを定義しました。連続ループを有効にするには、各画像の CSS ルールに次の行を追加します:

animation-iteration-count: infinite;
ログイン後にコピー

プロパティが追加された更新された CSS は次のとおりです:

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...
ログイン後にコピー

アニメーション反復を設定することで画像ごとに無限にカウントすると、フェードイン アニメーションが無限に繰り返され、中断されることなく画像間をシームレスに遷移することが保証されます。これにより、アニメーションが連続的にループしているかのような錯覚が生まれます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート