Bonjour,
J'essaie de me créer un petit diaporama de 3 images en pur CSS, avec des fondus.
Avec Chrome, ça fonctionne très bien, mais avec Firefox, l'animation n'est pas propre, parfois les fondus ne sont pas réguliers, parfois on voit la fin de la translation de mon "slideshow" alors que l'opacité n'est pas à 0...
Quelqu'un aurait-il une idée d'où cela peut venir ?
Merci par avance
Voici mon code HTML :
et mon code CSS :
Modifié par miaoumix75 (22 Jun 2024 - 22:47)
J'essaie de me créer un petit diaporama de 3 images en pur CSS, avec des fondus.
Avec Chrome, ça fonctionne très bien, mais avec Firefox, l'animation n'est pas propre, parfois les fondus ne sont pas réguliers, parfois on voit la fin de la translation de mon "slideshow" alors que l'opacité n'est pas à 0...
Quelqu'un aurait-il une idée d'où cela peut venir ?
Merci par avance
![Smiley smile](https://cdnf.alsacreations.net/smilies/smile.gif)
Voici mon code HTML :
<div class="diapo">
<div class="slideshow">
<img class="slide" src="images/1.png">
<img class="slide" src="images/2.png">
<img class="slide" src="images/3.png">
</div>
</div>
et mon code CSS :
.diapo {
max-width: 30%;
overflow: hidden;
}
.slideshow {
display: flex;
animation: translate infinite 12s;
}
.slide {
flex: 0 0 100%;
animation: fadeInOut ease-in-out infinite 4s;
}
@keyframes translate {
0%, 33.33% {transform:translateX(0);}
33.34%, 66.66% {transform:translateX(-100%);}
66.67%, 100% {transform:translateX(-200%);}
}
@keyframes fadeInOut {
10%, 90% {opacity:1;}
0%, 100% {opacity:0;}
}
Modifié par miaoumix75 (22 Jun 2024 - 22:47)