How to Create Infinitely Looping CSS3 Animations?

Looping CSS3 Animations Indefinitely

In the pursuit of creating captivating animations, you may encounter the desire to make them loop seamlessly forever. While reloading the page at the end of an animation cycle may seem like a simple solution, it can be less than ideal. Fortunately, there is an elegant way to achieve this using pure CSS3.

In your provided code, each image fades in and out over a set duration. To make this animation loop infinitely, we need to modify the animation-iteration-count property. This property specifies how many times an animation should repeat.

animation-iteration-count: infinite;

By setting animation-iteration-count to infinite, the animation will repeat itself indefinitely, ensuring that your images fade in and out continuously.

Here's the updated CSS with the added property:

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

Now, your images will fade in and out indefinitely, creating a seamless and visually appealing animation loop.

The above is the detailed content of How to Create Infinitely Looping CSS3 Animations?. For more information, please follow other related articles on the PHP Chinese website!