CSS3 で、最初の画像がシームレスにフェードインし、最後の画像がフェードアウトする連続ループアニメーションを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 で、最初の画像がシームレスにフェードインし、最後の画像がフェードアウトする連続ループアニメーションを作成するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-19 10:11:02

オリジナル

483 人が閲覧しました

How can I create a continuous looping animation in CSS3 where the first image seamlessly fades in as the last image fades out?

CSS3 でのシームレスなループアニメーションの作成

問題:

最初のアニメーションシーケンスを作成したいと考えています。最後の画像がフェードアウトすると、画像もフェードインします。

提供されたコード:

提供された HTML および CSS コードは、順番にフェードインする一連の 5 つの画像を確立します。最後の画像に到達すると、ページがリロードされます。

animation-iteration-count を使用した解決策:

ページをリロードせずに無限ループを実現するには、次のプロパティをアニメーションルール:

animation-iteration-count: infinite;

ログイン後にコピー

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

更新された CSS:

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