Animation

Suite à la bande défilante du petit randonneur, je me relance dans les animations automatiques, avec éventuellement arrêt au survol, dans un article avec images.

Revoyons un code de principe en utilisant des mesure adaptatives:

Le rond jaune  et le carré vert peuvent être des images qui s'agrandissent selon le cycle défini.

Le code est assez long et répétitif car chaque élément reçoit son animation personnalisée et avec beaucoup d'éléments...

De plus, si on souhaite un arrêt au survol, il faut que le survol arrête l'animation générale, ce qui est le cas dans la bande défilante car l'animation est commune à tous les éléments.

Dans le cas de plusieurs éléments, il faut ajouter un bouton qui arrête toutes les animations d'un coup, au survol, comme dans mon exemple en survolant le X.

<div style="width: 20vw; height: 23vh; margin: 0vh auto; border: 0.2vh solid black;">
<p id="ar">X</p>
<p id="al1">&nbsp;</p>
<p id="al2">&nbsp;</p>
</div>

<style><!--
#ar{position:absolute; z-index:20; font-size:2.5vh; color:red; text-shadow:0.1vh 0.1vh black; transform:translate(18vw,0vh);}
#al1{animation: alain1 10s linear infinite; position:absolute; z-index:1; animation-play-state: running;}
@keyframes alain1{
0% { transform:translate(5vw,5vh); width:5vw; height:5vw; border-radius:50%; background:yellow;}
5% { transform:translate(5vw,5vh); width:5vw; height:5vw; border-radius:50%; background:yellow;}
10% {z-index:10; transform:translate(0vw,0vh); width:20vw; height:23vh; border-radius:0%; background:pink;}
20% {z-index:10; transform:translate(0vw,0vh); width:20vw; height:23vh; border-radius:0%; background:pink;}
25% { transform:translate(5vw,5vh); width:5vw; height:5vw; border-radius:50%; background:yellow;}
100% { transform:translate(5vw,5vh); width:5vw; height:5vw; border-radius:50%; background:yellow;}}

#al2{animation: alain2 10s linear infinite; position:absolute; z-index:1; animation-play-state: running;}
@keyframes alain2{
0% { transform:translate(12vw,5vh); width:5vw; height:10vh; background:green;}
30% { transform:translate(12vw,5vh); width:5vw; height:10vh; background:green;}
35% {z-index:10; transform:translate(0vw,0vh); width:20vw; height:23vh; background:aqua;}
45% {z-index:10; transform:translate(0vw,0vh); width:20vw; height:23vh; background:aqua;}
50% { transform:translate(12vw,5vh); width:5vw; height:10vh; background:green;}
100% { transform:translate(12vw,5vh); width:5vw; height:10vh; background:green;}}

 
#ar:hover ~#al1,#ar:hover ~#al2{animation-play-state: paused;}
 
--></style>

Il faut  régler les % de chaque animation en fonction de l'effet désiré.