Slideshow en CSS3 (animation propriété mask)

🏠 Accueil blog » Démonstrations CSS3
Cette démonstration n'est pas compatible avec votre version d'internet Explorer.

Petit effet de balayage :

✔ Support navigateurs :

  
/*Demo 1*/   
.slideshow1 [src]{
position:absolute;
opacity:0;
left:0;
-webkit-mask-image:linear-gradient(45deg,hsl(0,0%,0%) 47%,transparent 52%);
-webkit-mask-size:300% 100%;
animation:slide 9s linear infinite}
       
.slideshow1{
list-style:none;
position:relative;
overflow:hidden;
width:600px;
height:400px;
margin:auto;
border:10px solid #fff;
box-shadow:0 1px 4px hsla(0,0%,0%,.4)}

.slideshow1 [src="votreimage.jpg"]{animation-delay:3s}
.slideshow1 [src="votreimage.jpg"]{animation-delay:6s}


@keyframes slide{
12%{opacity:1}
25%{opacity:1;-webkit-mask-position:0}
32%{opacity:0;-webkit-mask-position:100%}
100%{opacity:0}}   
 

<ul class="slideshow1">
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
</ul>

Cette démonstration n'est pas compatible avec votre version d'internet Explorer.

Effet store :

✔ Support navigateurs :


<div class="slideshow">
<ul>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
</ul>
</div>


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
.slideshow{
width:600px;
margin:1.25rem auto}
    
.slideshow ul{
height:400px;
border:5px solid hsl(0,0%,100%);
box-shadow:0 0 5px hsla(0,0%,0%,.5);
overflow:hidden;
position:relative}
    
    
.slideshow li{
height:400px;
width:600px;
position:absolute;
opacity:0;
-webkit-mask-image:linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%));
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;
animation:slideshow 25s linear infinite}


.slideshow li:nth-child(2){animation-delay:5s}
.slideshow li:nth-child(3){animation-delay:10s}
.slideshow li:nth-child(4){animation-delay:15s}
.slideshow li:nth-child(5){animation-delay:20s}
    
@keyframes slideshow{
0%{opacity:0}
10%{opacity:1}
20%{opacity:1;
-webkit-mask-position:
0 0, 
60px 0, 
120px 0, 
180px 0, 
240px 0,
300px 0, 
360px 0, 
420px 0, 
480px 0, 
540px 0;
-webkit-mask-size:10% 100%}    
25%{opacity:0;-webkit-mask-size:0% 100%}
100%{opacity:0}}

👉 Source, inspiration, ressources :

source originale.

Voir sur ce blog d'autres exemples de masque en CSS3.

Voir sur ce blog : comment créer une galerie d'images en CSS3.