Moins fatigant. article du 26/1/16

<div id="mont">
<p><span id="txt">&nbsp;</span><img id="im1" src="http://ekladata.com/K_NcYuKmBf5elQH58e-VBKDpHxM/6680.jpg" alt="" /> <img id="im2" src="http://ekladata.com/tBe9S7FP5Zw0SeK0a8K998HMTQw/6681.jpg" alt="" /> <img id="im3" src="http://ekladata.com/Bb2TvgZcgWodLB5vgHJb2ZbdkSU/6682.jpg" alt="" /> <img id="im4" src="http://ekladata.com/8hWcATGvepDcV3QtAItdO-vtzHk/6683.jpg" alt="" /></p>
</div>
<style type="text/css"><!--
#mont{ position:relative; margin:10px auto; width:800px; height:600px; border:2px solid black; background:url(http://ekladata.com/Bc0XtTT2X6FIuDpwNsE6F8sjMhc/ck-69.jpg);}
#txt{position:absolute; z-index:10; width:800px; height:600px; transform:translate(0px,0px);}
#im1{position:absolute; z-index:1; border:3px solid white; animation:my1 20s linear 0s infinite normal; animation-play-state:running;}
@keyframes my1
{
0% {transform:translate(50px,50px);width:200px;height:200px; border:3px solid white; border-radius:50%; box-shadow:4px 4px 6px black;}
2% {transform:translate(50px,50px);width:200px;height:200px; border:3px solid white; border-radius:50%; box-shadow:4px 4px 6px black;}
7%{width:800px; height:600px;transform:translate(0px,0px);z-index:5; border:0px solid white;border-radius:0%;box-shadow:0px 0px 0px black;}
20%{width:800px; height:600px;transform:translate(0px,0px);z-index:5; border:0px solid white; border-radius:0%;box-shadow:0px 0px 0px black;}
25%{transform:translate(50px,50px);width:200px;height:200px;border-radius:50%; border:3px solid white;box-shadow:4px 4px 6px black;}
100%{transform:translate(50px,50px);width:200px;height:200px;border-radius:50%; border:3px solid white; box-shadow:4px 4px 6px black;}
}
#im2{position:absolute;z-index:1;border:3px solid white;animation:my2 20s linear 0s infinite normal;animation-play-state:running; }
@keyframes my2
{
0% {transform:translate(400px,100px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
25% {transform:translate(400px,100px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
30%{width:800px; height:600px;transform:translate(0px,0px);z-index:5;border-radius:0%;box-shadow:0px 0px 0px black;border:0px solid white;}
43%{width:800px; height:600px;transform:translate(0px,0px);z-index:5;border-radius:0%;box-shadow:0px 0px 0px black;border:0px solid white;}
48%{transform:translate(400px,100px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
100%{transform:translate(400px,100px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
}
#im3{position:absolute;z-index:1;border:3px solid white; animation:my3 20s linear 0s infinite normal;animation-play-state:running;}
@keyframes my3
{
0% {transform:translate(200px,350px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
48% {transform:translate(200px,350px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
55%{ width:800px; height:600px;transform:translate(0px,0px);z-index:5;border-radius:0%;box-shadow:0px 0px 0px black;border:0px solid white;}
67%{width:800px; height:600px;transform:translate(0px,0px);z-index:5;border-radius:0%;box-shadow:0px 0px 0px black;border:0px solid white;}
72%{transform:translate(200px,350px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
100%{transform:translate(200px,350px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
}
#im4{position:absolute;z-index:1; border:3px solid white; animation:my4 20s linear 0s infinite normal;animation-play-state:running;}
@keyframes my4{
0% {transform:translate(500px,300px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
72% {transform:translate(500px,300px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;}
79%{width:800px; height:600px;transform:translate(0px,0px);z-index:5;border-radius:0%;box-shadow:0px 0px 0px black;border:0px solid white;}
95%{width:800px; height:600px;transform:translate(0px,0px);z-index:5;border-radius:0%;box-shadow:0px 0px 0px black;border:0px solid white;}
100% {transform:translate(500px,300px);width:200px;height:200px;border-radius:50%;box-shadow:4px 4px 6px black;border:3px solid white;} }
#txt:hover ~ #im1,#txt:hover ~ #im2,#txt:hover ~ #im3,#txt:hover ~ #im4{animation-play-state:paused;}
--></style>
Adresses 4 images en 800x600px en rouge; si vous voulez en ajouter ou en retirer, il vous faut modifier les animations.
Chaque image reçoit une animation particulière, pour être synchronisée avec les autres (paragraphes CSS colorés).
Vous remarquerez l'écriture, en une seule ligne CSS, de l'arrêt au survol, de toutes les animations.