Comment puis-je créer une animation en boucle continue dans CSS3 où la première image apparaît de manière transparente tandis que la dernière image disparaît ?-tutoriel CSS-php.cn

Comment puis-je créer une animation en boucle continue dans CSS3 où la première image apparaît de manière transparente tandis que la dernière image disparaît ?

Mary-Kate Olsen

Libérer： 2024-11-19 10:11:02

original

557 Les gens l'ont consulté

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

Création d'une animation en boucle harmonieuse en CSS3

Problème :

Vous souhaitez créer une séquence d'animation infinie où le premier l'image apparaît lorsque la dernière image disparaît.

Fourni Code :

Le code HTML et CSS fourni établit une série de cinq images qui apparaissent en fondu séquentiellement, mais en atteignant la dernière image, la page se recharge.

Solution utilisant animation-iteration-count :

Pour réaliser une boucle infinie sans recharger la page, ajoutez la propriété suivante à l'animation règles :

animation-iteration-count: infinite;

Copier après la connexion

Cette propriété spécifie le nombre de fois que l'animation doit se répéter. En le réglant sur infini, vous vous assurez que l'animation s'exécute indéfiniment.

CSS mis à jour :

/* 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;
}

Copier après la connexion

Avec cette modification, la séquence d'animation bouclera désormais à l'infini, assurant une transition transparente de la dernière image à la première.

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!