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

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

魅力的なアニメーションを作成しようとすると、アニメーションをシームレスに永久にループさせたいという欲求に遭遇するかもしれません。アニメーション サイクルの最後にページをリロードするのは簡単な解決策のように思えるかもしれませんが、理想的とは言えない可能性があります。幸いなことに、純粋な CSS3 を使用してこれを実現するエレガントな方法があります。

提供されたコードでは、各画像は設定された期間にわたってフェードインおよびフェードアウトします。このアニメーションを無限ループさせるには、animation-iteration-count プロパティを変更する必要があります。このプロパティは、アニメーションを繰り返す回数を指定します。

animation-iteration-count: infinite;

animation-iteration-count を無限に設定すると、アニメーションが無期限に繰り返され、画像が連続的にフェードインおよびフェードアウトされます。

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

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

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { 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 infinite;
    -moz-animation: fadeinphoto 7s 1 infinite;
    -webkit-animation: fadeinphoto 7s 1 infinite;
    -o-animation: fadeinphoto 7s 1 infinite;
}

.photo2 {
    opacity: 0;
    animation: fadeinphoto 7s 5s infinite;
    -moz-animation: fadeinphoto 7s 5s infinite;
    -webkit-animation: fadeinphoto 7s 5s infinite;
    -o-animation: fadeinphoto 7s 5s infinite;
}

.photo3 {
    opacity: 0;
    animation: fadeinphoto 7s 10s infinite;
    -moz-animation: fadeinphoto 7s 10s infinite;
    -webkit-animation: fadeinphoto 7s 10s infinite;
    -o-animation: fadeinphoto 7s 10s infinite;
}

.photo4 {
    opacity: 0;
    animation: fadeinphoto 7s 15s infinite;
    -moz-animation: fadeinphoto 7s 15s infinite;
    -webkit-animation: fadeinphoto 7s 15s infinite;
    -o-animation: fadeinphoto 7s 15s infinite;
}

.photo5 {
    opacity: 0;
    animation: fadeinphoto 7s 20s infinite;
    -moz-animation: fadeinphoto 7s 20s infinite;
    -webkit-animation: fadeinphoto 7s 20s infinite;
    -o-animation: fadeinphoto 7s 20s infinite;
}

これで、画像が無期限にフェードインおよびフェードアウトし、シームレスで視覚的に魅力的なアニメーション ループが作成されます。

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