Diapo etoile

 6 images au ratio 16/9, en 800x450px; pas d'arrêt au survol.

<div style="position: relative; margin: 30px auto; text-align: left; width: 800px; height: 450px;"><img id="fr1" class="fr" src="http://ekladata.com/Ccb0dhyY6PNyxB7nn9bUT8hcWDM@800x450.jpg" alt="" /> <img id="fr2" class="fr" src="http://ekladata.com/qiOdd4fmw7wH-G_3ybwya4A7mMU@800x450.jpg" alt="" /> <img id="fr3" class="fr" src="http://ekladata.com/ipo7Yo9r2RHWN6HiCcdUAsa93lI@800x450.jpg" alt="" /> <img id="fr4" class="fr" src="http://ekladata.com/faN1j4oRV0mQ3OtcrQVdkTRiRBs@800x450.jpg" alt="" /> <img id="fr5" class="fr" src="http://ekladata.com/n0jWIRxxM_0MEPa1ALKw3BbDh4Y@800x450.jpg" alt="" /> <img id="fr6" class="fr" src="http://ekladata.com/Tyj2woJRvhB-lYX3WRXyNuDhwxk@800x450.jpg" alt="" /></div>
<style><!--
.fr{position:absolute;}
#fr1{animation:fleur1 24s linear 2s infinite normal; animation-play-state:running;}
#fr2{animation:fleur2 24s linear 6s infinite normal; animation-play-state:running;}
#fr3{animation:fleur3 24s linear 10s infinite normal; animation-play-state:running;}
#fr4{animation:fleur4 24s linear 14s infinite normal; animation-play-state:running;}
#fr5{animation:fleur5 24s linear 18s infinite normal; animation-play-state:running;}
#fr6{animation:fleur6 24s linear 22s infinite normal; animation-play-state:running;}
@keyframes fleur1{
0% {z-index:1; clip-path:polygon(0% 0%, 40% 0%,50% 50%,50% 50%);}
5% {z-index:1; clip-path:polygon(0% 0%, 40% 0%,50% 50%,50% 50%);}
6% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
16% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
17% {z-index:1; clip-path:polygon(0% 0%, 40% 0%,50% 50%,50% 50%);}
100% {z-index:1; clip-path:polygon(0% 0%, 40% 0%,50% 50%,50% 50%);}}
@keyframes fleur2{
0% {z-index:1;clip-path:polygon(60% 0%, 100% 0%,50% 50%,50% 50%);}
5% {z-index:1;clip-path:polygon(60% 0%, 100% 0%,50% 50%,50% 50%);}
6% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
16% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
17% {z-index:1; clip-path:polygon(60% 0%, 100% 0%,50% 50%,50% 50%);}
100% {z-index:1;clip-path:polygon(60% 0%, 100% 0%,50% 50%,50% 50%);}}
@keyframes fleur3{
0% {z-index:1; clip-path:polygon(50% 50%, 100% 30%,100% 70%,50% 50%);}
5% {z-index:1; clip-path:polygon(50% 50%, 100% 30%,100% 70%,50% 50%);}
6% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
16% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
17% {z-index:1; clip-path:polygon(50% 50%, 100% 30%,100% 70%,50% 50%);}
100% {z-index:1; clip-path:polygon(50% 50%, 100% 30%,100% 70%,50% 50%);}}
@keyframes fleur4{
0% {z-index:1; clip-path:polygon(50% 50%, 50% 50%,100% 100%,60% 100%);}
5% {z-index:1; clip-path:polygon(50% 50%,50% 50%, 100% 100%,60% 100%);}
6% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
16% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
17% {z-index:1; clip-path:polygon(50% 50%, 50% 50%, 100% 100%,60% 100%);}
100% {z-index:1; clip-path:polygon(50% 50%, 50% 50%, 100% 100%,60% 100%);}}
@keyframes fleur5{
0% {z-index:1; clip-path:polygon(50% 50%, 50% 50%,40% 100%,0% 100%);}
5% {z-index:1; clip-path:polygon(50% 50%,50% 50%, 40% 100%,0% 100%);}
6% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
16% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
17% {z-index:1; clip-path:polygon(50% 50%, 50% 50%, 40% 100%,0% 100%);}
100% {z-index:1; clip-path:polygon(50% 50%, 50% 50%, 40% 100%,0% 100%);}}
@keyframes fleur6{
0% {z-index:1; clip-path:polygon(0% 30%, 50% 50%,50% 50%,0% 70%);}
5% {z-index:1; clip-path:polygon(0% 30%,50% 50%, 50% 50%,0% 70%);}
6% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
16% {z-index:5; clip-path:polygon(0% 0%, 100% 0%,100% 100%,0% 100%);}
17% {z-index:1; clip-path:polygon(0% 30%, 50% 50%, 50% 50%,0% 70%);}
100% {z-index:1; clip-path:polygon(0% 30%, 50% 50%, 50% 50%,0% 70%);}}
--></style>