How can I create a continuous looping animation in CSS3 where the first image seamlessly fades in as the last image fades out?-CSS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2024-11-19 10:11:02

Original

483 people have browsed it

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

Creating a Seamless Looping Animation in CSS3

Problem:

You want to create an infinite animation sequence where the first image fades in when the last image fades out.

Provided Code:

The provided HTML and CSS code establishes a series of five images that fade in sequentially, but upon reaching the last image, the page reloads.

Solution Using animation-iteration-count:

To achieve an infinite loop without reloading the page, add the following property to the animation rules:

animation-iteration-count: infinite;

Copy after login

This property specifies the number of times the animation should repeat. By setting it to infinite, you ensure that the animation runs indefinitely.

Updated 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;
}

Copy after login

With this modification, the animation sequence will now loop infinitely, ensuring a seamless transition from the last image to the first.

The above is the detailed content of How can I create a continuous looping animation in CSS3 where the first image seamlessly fades in as the last image fades out?. For more information, please follow other related articles on the PHP Chinese website!