Comment faire une animation CSS

De plus en plus d’intégrateurs utilisent les animations CSS pour animer leur site web et remplace des animations les plus simple qui utiliser le javascript par du CSS.

Le squelette de l’animations CSS

Pour appeler une animation CSS sur un sélecteur de type div ou autre il faut avant tout l’appeler avec « animation » puis on nomme son animation

Exemple: div { animation: nomDeMonAnimation ; }

il faut alors lui donner un temps d’exécution, sa vitesse.

Exemple: div { animation: nomDeMonAnimation 10s ; }

Lui donner un type de mouvement (pour en savoir plus) c’est ce qui modifie la vitesse et la façon de lire l’animation (si elle accélère, ralentie…

Exemple: div { animation: nomDeMonAnimation 10s linear ; }

Nous pourrions nous arrêter là et utiliser les pourcentages pour à la déclaration de l’animation., mais dans l’exemple nous allons utiliser un mouvement perpétuel donc nous allons rajouter un attribut.

Exemple: div { animation: nomDeMonAnimation 10s linear  infinite; }

Gérer le déroulement de l’animation

Une fois notre animation déclaré dans l’élément correspondant il faut la détailler pour cela nous utilisons la déclaration @keyframes.

Exemple: @keyframes nomDeMonAnimation{ }

et là nous avons plusieurs méthodes suivant l’animation que vous souhaitez obtenir:

1. Les pourcentage très utilise pour découper son animation, cela peut etre utilisé pour un diaporama avec du « overflow:hidden » par exemple :
   Exemple: @keyframes nomDeMonAnimation{
   0% { margin-left : 10% ; }
   50% { margin-left : 30% ; }
   100%  { margin-left : 50% ; }
   }
2. Le  » from to » utiliser pour pouvoir afficher un passage d’un état à l’autre si l’état initial ne change pas un simple « to » suffit .
   Exemple: @keyframes nomDeMonAnimation{
   from{border-radius:5%;}
   to{border-radius:50%;}
   }

Vous aurez pour des animations réussi à connaitre principalement les fonction » rotate » et « translate » qui se marient à merveille avec ce type d’animation.

Rien n’est impossible

Avec juste ces petit bout de code en tête vous pourrez effectuer beaucoup de vos idées pour animer votre site.
Vous pouvez même l’utiliser pour faire de l’animation 3D.
Cependant un petit bémols, c’est une nouvelle technologie qui n’est pas encore optimiser au maximum pour les navigateurs actuels, cela consomme beaucoup de ressources si vous en faites de l’animation 3D ou jeux vidéo .