Votre navigateur ne supporte pas cette démonstration
<div class="slideshow stores">
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
</div>
<div class="slideshow balayage">
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
</div>
*{box-sizing: border-box}
.slideshow{
margin:5rem auto;
max-width: 600px;
aspect-ratio:3/2;
border: 5px solid white;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.29);
overflow: hidden;
position: relative;
}
@supports not (aspect-ratio:3/2){
.no-aspect {
padding-top: 66.67%;
}
}
.slideshow img{
height: 100%;
width:100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-mask-image:var(--mask-effet);
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/**************animation generale*************************/
.slideshow img:nth-child(2){
animation-delay: 3s
}
.slideshow img:nth-child(3){
animation-delay: 6s
}
.slideshow img:nth-child(4){
animation-delay: 9s
}
.slideshow img:nth-child(5){
animation-delay: 12s
}
/**************animation generale*************************/
@property --stores {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
.stores img {
--taille-stores: 40px;
--stores: var(--taille-stores);
animation-name: slideshow-store;
--mask-effet:repeating-linear-gradient(var(--direction-mask),black,black var(--stores), transparent var(--stores),transparent var(--taille-stores));
/*pour changer la direction*/--direction-mask:to bottom
}
@keyframes slideshow-store{
0%,100% {opacity: 0;--stores: 0px;}
6.67% {opacity: 1;--stores: 40px;}
20% {opacity: 1;--stores: 40px;}
26.67%{opacity:0;--stores: 40px;}
}
@property --balayage {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.balayage img {
--balayage: 100%;
--mask-balayage:10%;
animation-name: slideshow-balayage;
--mask-effet:linear-gradient(
var(--direction-mask),black var(--balayage),
transparent calc(var(--balayage) + var(--mask-balayage)),transparent);
/*pour changer la direction*/--direction-mask:to bottom
}
@keyframes slideshow-balayage{
0%,100% {opacity: 0;--balayage: 100%}
6.67% {opacity: 1;--balayage: 100%}
20% {opacity: 1;--balayage: 100%}
26.67%{opacity:0;--balayage: -100%}
}