Comment créer des animations CSS3 en boucle infinie ?

Boucler indéfiniment des animations CSS3

Dans la poursuite de la création d'animations captivantes, vous pourriez rencontrer le désir de les faire boucler de manière transparente pour toujours. Même si recharger la page à la fin d’un cycle d’animation peut sembler une solution simple, elle peut s’avérer loin d’être idéale. Heureusement, il existe un moyen élégant d'y parvenir en utilisant du CSS3 pur.

Dans le code fourni, chaque image apparaît et disparaît en fondu sur une durée définie. Pour faire boucler cette animation à l'infini, nous devons modifier la propriété animation-iteration-count. Cette propriété spécifie combien de fois une animation doit se répéter.

animation-iteration-count: infinite;

En définissant animation-iteration-count sur infini, l'animation se répétera indéfiniment, garantissant que vos images apparaissent et disparaissent continuellement.

Voici le CSS mis à jour avec la propriété ajoutée :

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

Maintenant, vos images apparaîtront et disparaîtront indéfiniment, créant un ensemble transparent et transparent. boucle d'animation visuellement attrayante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!