CSS- Les animations en CSS

Bonjour à toi !

Souvent, on dis que les animations ( bloc qui 'clignote', qui se déplace d'un point A à un point B, etc) ne sont faites qu'en javascript. Et bien non ! C'est possible en CSS et c'est même préférable pour ne pas surcharger la page en l'obligeant à charger du javascript inutile.
Pour cela, on va utiliser les "kreyframes". Je vais essayer de t'expliquer ça le plus simplement possible : n'aies pas peur, tu vas voir.

Pour rappel, on a vu quelques effets de transition juste ici.


On confond très souvent transition et animation. Mais quelle est la différence ?
Une transition est un effet qui aura lieu lors d'un évènement particulier : par exemple quand je passe ma souris sur un bloc et qu'il s'agrandit.

Une animation est, quant à elle, un effet qui aura lieu au passage de la souris mais pas seulement, ça peut aussi être au chargement de la page : par exemple un titre qui clignote ou une image qui tourne sur elle même, sans qu'on ait besoin de passer la souris sur l’élément. Une animation peut également se répéter indéfiniment


Comme tu as pu t'en rendre compte, pour mon animation j'ai utilisé quelques propriétés. Voilà les plus importantes :
• animation-name: propriété obligatoire, on indique le nom de notre animation (qu'on a défini avec les keyframes, dans mes exemples : clignotement et largeur).
• animation-duration: propriété obligatoire également, on indique la durée d'une occurrence de l'animation (c'est là dessus que se basent nos keyframes) soit en secondes (s) soit en millisecondes (ms)
• transition-timing-function : propriété facultative, on définit ici un effet sur le temps. Par défaut, ease est utilisé

• ease : Rapide sur le début et ralenti sur la fin.
  
• linear : La vitesse est constante sur toute la durée de l'animation.
  
• ease-in : Lent sur le début et accélère de plus en plus vers la fin.
  
• ease-out : Rapide sur le début et décéléré sur la fin.
  
• ease-in-out : Le départ et la fin sont lents.
  

• animation-iteration-count: on indique ici le nombre d’occurrence. Par défaut il est à 1. Pour le mettre "à l'infini" on utilise "infinite"
• animation-delay: on indique ici un délai avant prise en compte de l'animation (en ms ou s).
• animation-play-state: par défaut sur "running", on peut mettre en pause l'animation en mettant la valeur "paused" (par exemple quand on passe la souris sur l'élément).


Pour mettre en place une animation, on va utiliser des "keyframes" pour paramétrer le tout. Par exemple : je veux une animation qui permette de faire clignoter un élément. Je vais l'appeler "clignotement"

Code:

@keyframes clignotement{
 
}

Ensuite, je vais lui ajouter 3 keyframes : 0%, 50% et 100% (l'ordre n'est pas important, le 100% peut être en premier il sera bien pris en compte quand même).

Code:

0% {
  }
  50%{
  }
  100%{
  }

les pourcentages correspondent au moment de l'animation. Par exemple sur une animation qui dure 10 secondes : 0% correspond à la seconde 0 et 50% à la seconde 5.
Et je vais lui indiquer que je veux qu'elle parte d'une opacité à 1 et arrive à une opactié à 0 :

Code:

0% {
    opacity:1;
  }
  50%{
    opacity:0;
  }
  100%{
    opacity:1;
  }

Ce qui va donner :

Code:

@keyframes clignotement{
  0% {
    opacity:1;
  }
  50%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

Et maintenant, il suffit de l'appliquer à notre élément comme ceci (si je veux l'appliquer à un paragraphe) :

Code:

p.clignote{
  animation: clignotement 3s ease-in-out;
  animation-iteration-count:infinite;
}

Si on test ça on a donc :

Code:

<style>
@keyframes clignotement{
  0% {
    opacity:1;
  }
  50%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
p.clignote{
  animation: clignotement 3s;
  animation-iteration-count:infinite;
}</style>
<p class="clignote">mon texte clignote</p>

mon texte clignote

Plutôt facile n'est-ce pas ?



C'est un peu plus compliqué ici : on va d'abord préparer la boite contenant le texte qui va défiler :

Code:

<p class="defilement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lacinia risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices sapien id mauris vulputate tristique. Sed sodales placerat nisi sit amet condimentum. Phasellus volutpat nulla nec malesuada lobortis. </p>

On va lui appliquer la CSS pour que tous le texte ne soit que sur une ligne (on applique largeur et hauteur) :

Code:

<style>p.defilement{
width:3000px;
height:12px;
}</style>
<p class="defilement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lacinia risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices sapien id mauris vulputate tristique. Sed sodales placerat nisi sit amet condimentum. Phasellus volutpat nulla nec malesuada lobortis. </p>

Spoiler:

Ensuite on va mettre notre texte dans un bloc qui servira de conteneur (je choisis un bloc de 500px de large) et on lui dit de cacher tout ce qui dépasse :

Code:

<style>p.defilement{
width:3000px;
height:12px;
}
div.conteneur{
width:500px;
overflow:hidden;
}</style>
<div style="width:500px;overflow:hidden;"><p class="defilement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lacinia risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices sapien id mauris vulputate tristique. Sed sodales placerat nisi sit amet condimentum. Phasellus volutpat nulla nec malesuada lobortis. </p></div>

Maintenant qu'on a notre largeur de bloc, on va pouvoir lui définir l'animation : on commence (from = 0%) à droite du bloc (donc je met la largeur de mon bloc conteneur) et on fini (to = 100%) une fois que tout le texte est fini : je mets la largeur de mon bloc texte :

Code:

<style>@keyframes Defilement{
from {
margin-left:500px;
}
to {
margin-left:-3000px;
}
}
p.defilement{
animation: linear Defilement 15s infinite;
oveflow:hidden;
width:3000px;
height:12px;
}</style>
<div style="width:500px;overflow:hidden;"><p class="defilement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lacinia risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices sapien id mauris vulputate tristique. Sed sodales placerat nisi sit amet condimentum. Phasellus volutpat nulla nec malesuada lobortis. </p></div>

Et voilà ! A adapter bien sûr =)


Maintenant, je veux que la largeur de mon image grandisse puis revienne en position normale, mais je veux qu'elle s'agrandisse plus lentement qu'elle rétrécisse. Bref, pour être clair, voilà ce que je veux :

Spoiler:

Et bien le code qui correspond est celui-ci :
j'ai utilisé le keyframe 80% et pas 50% pour passer plus de temps sur la première partie de l'animation que la seconde.

Code:

<style>@keyframes largeur{
  0%{
    width:200px;
    height:250px;
  }
  80%{
    width:100%;
    height:250px;
  }
  100%{
    width:200px;
    height:250px;
  }
}
.image_large{
animation: largeur 4s;
animation-iteration-count:infinite;
}</style>
<img class="image_large" src="https://zupimages.net/up/19/21/h7xo.png" alt="avatar pêpêche" />

A toi de jouer avec les pourcentages et les possibilités : faire bouger la largeur, la hauteur, la couleur, la transparence, faire tourner, etc...


Allez encore un petit exemple (je ne détaille pas le code, dis moi si tu ne le comprends pas =) ) :

Spoiler:

---

Il existe de trèèès nombreuses possibilités d'animations en CSS. Tu peux aller voir notre site chouchou juste ici qui détaille pas mal d'autres choses en complément.

Si tu as des questions, si le tutoriel n'est pas clair ou que tu veux creuser un peu, n'hésite pas à demander de l'aide