CSS3 でシームレスなループ アニメーションを作成するにはどうすればよいですか?

シームレスにループする CSS3 アニメーション

問題:

最後のフレームから次のフレームにシームレスに移行する、中断のないアニメーションが必要です。まず、連続ループエフェクトを作成します。

解決策:

1. anime-iteration-count プロパティを使用します:

次のプロパティをキーフレームに追加します:

animation-iteration-count: infinite;

このプロパティは、アニメーションを繰り返す回数を指定します。無限に設定すると、アニメーションが無限にループします。

2.改訂された CSS コード:

更新された CSS コードは次のとおりです:

@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-webkit-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-o-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

説明:

アニメーション反復回数を指定することにより: 無限。各写真はフェードインし、一定期間表示されたままになり、その後フェードアウトして最初の写真にスムーズに戻り、無限ループが作成されます。

注:

ループがシームレスに動作するために、不透明度が 1 から 0 (またはその逆) に変化するようにアニメーションが設計されていることを確認してください。

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