Animation CSS

Dans ma page précédente, j'ai proposé un montage "aigle", qui fait appel à une animation sur une image animée.

J'utilise peu cette possibilité car, à part lancer ou arrêter l'animation, le visiteur n'a pas d'action sur elle; cependant, il est bon de savoir que cela existe et que cela permet quelques fantaisies.

Le principe est le même que pour une image animée sur image fixe mais on ajoute une animation, souvent de translation, par le code CSS.

Commençons par un exemple:

<div style="width: 1000px; height: 563px; border: 6px ridge grey; margin: 5px auto; background: url('https://ekladata.com/op7zGni4Gbip-3_IoMtUWC_BM-s/593.jpg'); overflow: hidden;"><img id="gf" src="https://ekladata.com/2fipX9HJ5242j3qa4n9SDjz5TAI/bike143.gif" alt="" /></div>
<style><!--
#gf{animation:chris 8s linear 0s infinite normal; height:250px;}
@keyframes chris{
0% {transform:translate(-300px,300px);}
100% { transform:translate(1100px,250px);} }
--></style>

Vous écrivez votre code, comme précédemment, avec une identification (id="chris") de l'image animée, sur le fond fixe.

L'animation de cette image est définie en CSS, par la ligne surlignée en vert, elle-même paramétrée par les lignes surlignées en bleu.

Regardons ces lignes:

animation: indique au programme que l'élément sera à animer selon:

chris: nom de l'animation.

8s: 8 secondes, temps du cycle de l'animation.

linear: courbe de l'animation; dans un premier temps, je vous conseille de toujours écrire linear.

0s: 0 seconde: l'animation démarre sans retard; nous verrons qu'il est parfois utile, lorsque nous plaçons plusieurs images animées, de pouvoir en retarder une par rapport aux autres.

infinite: l'animation joue en boucle.

normal: l'animation, à la fin de son cycle, revient en position de départ; nous aurons la possibilité de la faire revenir en marche arrière.

******

Nous devons ensuite indiquer au programme ce qu'il doit faire pour cette animation; dans cet exemple, l'image animée se déplace d'un côté à un autre et il n'y a donc aucune phase intermédiaire entre le début et la fin.

@keyframes chris{....}

0%: au début de l'animation, nous définissons les attributs (ici, position mais ce peut être couleur, forme...); vous remarquerez l'attribut hauteur (height:250px) qui ne bouge pas du début à la fin.

100%: à la fin de l'animation, idem en fin de cycle.

Dans cet exemple, l'image animée passe de la position hors cadre, à gauche (-300px) à une position hors cadre, à droite (1100px), en passant d'une position de 300px, par rapport au bord haut à une position de 250px.

Notre cycliste étant une sportive, nous pouvons nous amuser à lui donner un inclinaison

<div style="width: 1000px; height: 563px; border: 6px ridge grey; margin: 5px auto; background: url('https://ekladata.com/op7zGni4Gbip-3_IoMtUWC_BM-s/593.jpg'); overflow: hidden;"><img id="gf1" src="https://ekladata.com/2fipX9HJ5242j3qa4n9SDjz5TAI/bike143.gif" alt="" /></div>
<style><!--
#gf1{animation:chris1 8s linear 0s infinite normal; height:250px;}
@keyframes chris1{
0% {transform:translate(-300px,300px) rotate(-20deg);}
100% { transform:translate(1100px,250px) rotate(-20deg);} }
--></style>

La seule action, à ma connaissance, que nous puissions faire sur cette animation, est de l'arrêter ou de la lancer.
Par défaut, elle est en fonctionnement (animation-play-state:running;) mais on peut l'arrêter au survol; dans notre cas, survolez le cycliste pour l'arrêter ... sans le faire tomber ! (animation-play-state:paused;)

<div style="width: 1000px; height: 563px; border: 6px ridge grey; margin: 5px auto; background: url('https://ekladata.com/K5pu7YIN5Cmsa1WCu6Akzvqnons/600.jpg'); overflow: hidden;"><img id="gf2" src="https://ekladata.com/6dEOx0UAh7Jr6y1bZAEZLxg6GJs/bike3.gif" alt="" /></div>
<style><!--
#gf2{animation:chris2 12s linear 0s infinite normal; height:250px; animation-play-state:running; z-index:5;}
#gf2:hover{animation-play-state:paused;}
@keyframes chris2{
0% {transform:translate(750px,300px) scale(1.5);}
50% { transform:translate(700px,300px) scale(0.5);}
70% { transform:translate(650px,300px) scale(0.2);}
95% { transform:translate(600px,300px) scale(0.1);}
100% { transform:translate(600px,300px) scale(0);} }
--></style>
...