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 サイトの他の関連記事を参照してください。