Salut, Les animations CSS

Cette fois je pense qu’on commence à rentrer un peu plus loin dans de la programmation. Jusqu’à présent, on sait mettre un élément en forme, et le faire passer d’un état A à un état B. Les animations en CSS, vont nous permettre d’aller plus loin et de monter des petits scénarios pour rendre nos pages encore plus vivantes.

On va pouvoir découper une d’animation en plusieurs séquences successives. On en est pas encore à pouvoir bosser chez Pixar, mais il faut bien commencer par quelque chose!

Encore une fois, je n’ai jamais utilisé ce genre de propriété, donc je découvre en même temps que toi. Je me forme toujours sur Openclassrooms, je t’encourage d’ailleurs à suivre le cours qui parle des propriétés CSS avancés.

Pour une fois, introduction courte, j’ai envi de me plonger là dedans rapidement!!

Ecrire le scénario

Imagine que tu partes en voyage sans itinéraire et sans carte. Tu ne sais donc pas où tu vas ni où tu vas arriver. Et bien pour faire ce que nous voulons faire dans cet article c’est un peu la même chose. Si on a pas une idée précise de l’animation que l’on veut, on va avoir du mal à la coder. L’idéal au début, ça va être d’écrire sur un coin de table , ou au milieu peu importe, les étapes par lesquelles nous voulons que notre élément HTML passe. Je te rassure tout de suite, je suis plutôt du genre à coder tête baissée mais je me soigne, et cette activité devrait m’aider pas mal!

D’autant que cette démarche de réflexion et d’écriture va nous aider à nous plonger dans la suite: l’apprentissage de Javascript où à mon avis il va aussi falloir avoir les idées claires à propos de ce que devra réaliser le programme.

Voici donc le scénario que je vais essayer de coder:

  • Etape 0 (Etat initial): Rectangle bleu clair avec des angles arrondis,
  • Etape1: Rectangle devient bleu foncé, et fait une rotation de 180 degrés et se déplace de 100px vers la droite, et devient  carré,
  • Etape 2: Le carré fait une rotation de 180 degrés et se déplace de 100px vers le bas et devient un peu plus foncé,
  • Etape 3: C’est maintenant un cercle d’un bleu très foncé, qui se déplace vers la gauche.

Voyons maintenant comment coder tout cela, maintenant que l’itinéraire du voyage est tracé…

Les animations CSS

Le @keyframes

Cela fait longtemps que j’ai en tête de me plonger dans cette propriété. J’avais acheté il y a un moment déjà un magazine de web design qui expliquait des tutos et souvent il y avait des animations CSS avec ce fameux @keyframes sans trop savoir ce que c’était. Je me contentait donc de recopier le code pour voir de que ça donnait et le fait de pouvoir faire des animations en CSS a beaucoup piqué ma curiosité et ça continue!

Cette directive @keyframes est une « règle-arobase » CSS spéciale permettant d’attribuer des changements d’états sur une durée donnée. C’est donc à l’intérieur de cette @keyframes que nous allons indiquer les étapes successives que nous souhaitons donner à notre élément HTML. C’est un peu une sorte de story-board.

Dans le fonctionnement, cela fait un peu penser à une autre »règle-arobase » CSS que tu connais déjà: @font-face.

Avec @font-face, tu définis une police que tu « appelles » ensuite par son nom au sein de la propriété font-family. Le principe est similaire avec le keyframes. On va donc écrire le scénario de l’animation, puis on va appeler ce scénario lors d’une action est réalisée, par exemple un survol, un clic, etc…

Voilà donc comment tu vas déclarer ton scénario:

@keyframes monScenario{

	Ici l'étape 1{
	...
	}

	Ici l'étape 2{
	...
	}

	Ici l'étape 3{
	...
	}

}

A la place d’écrire « ici Etape 1 » on peut écrire:

  • une position dans le temps en pourcentage, 0%, 50%, 66%, etc suivant le moment ou on veut déclencher  l’étape,
  • les mots from (depuis) et to(vers),  qui indique qu’on va d’un état A vers un état B. Il n’y a pas de moment précis du déclenchement de l’animation. Ne peut-être utilisé que pour un scénario comportant 2 étapes.

Appeler l’animation et la lancer

Construire un scénario, coder des propriétés qui changent à chaque étape c’est cool, mais il va falloir vérifier que tout s’enchaine bien désormais! Heureusement ce n’est pas la partie la plus compliquée!

Il ne nous reste plus qu’à utiliser par exemple le sélecteur CSS :hover, et d’utiliser une nouvelle propriété CSS, pour lancer l’animation qui s’appelle: animation. Celle là, pour s’en souvenir, on devrait y arriver même pour un mot en anglais…

Cette propriété va pouvoir contenir plusieurs valeurs:

  • la durée de l’animation exprimée en seconde (par ex. 2s),
  • le nom de l’animation à lancer, dans notre exemple on notera monScenario, sans guillemets, sans virgule,
  • la vitesse d’exécution, par exemple ease-in.  Si ça ne te dis rien, je t’invite à regarder mon article précédent sur les transitions CSS. Je parle justement de ces histoires de vitesse pour une animation. Sinon tu peux aussi regarder sur le MDN, la doc est en français et il y a plein d’exemple.

Voilà donc ce que tu vas avoir à saisir:

@keyframes monScenario{

	Ici l'étape 1{
	...
	}

	Ici l'étape 2{
	...
	}

	Ici l'étape 3{
	...
	}

}

.bloc:hover{
	animation: monScenario 4s ease-in;
}

Ce qui se cache derrière animation

Animation est en réalité une super-propriété qui regroupe les propriétés suivantes:

  • animation-name: le nom de l’animation,
  • animation-duration: la durée de l’animation,
  • animation-timing-function: ça doit de rappeler quelque chose si tu connais un peu les transitions CSS, cette propriété utilise les mêmes valeurs (ease, ease-in, linear, etc),
  • animation -iteration-count: le nombre de fois que le navigateur doit répéter l’animation,
  • animation-direction: indique si les cycles de l’animation doivent être « jouées » dans le sens inverse et/ou de façon alterné. je n’ai pas encore testé cette propriété, donc direction MDN pour voir comment ça marche. Il y a plusieurs valeurs, voir la doc dans le MDN.
  • animation-fill-mode: indique comment l’animation doit appliquer les styles CSS, si c’est avant ou après l’exécution. Encore une fois je te redirige vers la doc du MDN, aucun intérêt de le recopier ici, par contre très intéressant à lire.
  • animation-play-state: permets de déterminer si une animation est en cours d’exécution ou en pause. Il est possible de mettre une animation en pause et de la relancer ensuite. Je n’ai pas encore testé cette fonction, mais pour plus de renseignement, va voir sur MDN.

Ici le plus compliqué est bien sûr de savoir que toutes ces fonctions existent. Je ne les connais pas toutes par coeur, en revanche, j’essai de documenter un maximum les articles, et notamment celui là pour que tu saches où trouver l’information le jour où tu en auras besoinDès que j’ai un problème, je vais sur le Mozilla Developer Network!

Vers l’infini et au delà…

Il est  possible avec la propriété animation-iteration-count, il est possible de définir le nombre de fois que l’on veut que l’animation soit jouée, on peut même l’exécuter à l’infini! Enfin ça a tout de même la limite de la durée de la batterie de mon Macbook…

Cette valeur peut donc prendre comme valeur un nombre, qui sera le nombre de fois que tu veux répéter ton animation, ou infinite, qui permettra de la répéter à l’infini. Du coup, on fait une boucle sans programmation… pratique!

Pas à pas avec step()

J’avais parlé très rapidement de cette fonction lors de l’article précédent sur les transitions CSS. Cette fonction permet entre-autre de saccader une même séquence pour qu’elle ne paraisse pas fluide. C’est comme si ta voiture toussais, tu avances mais pas de façon linéaire. Je ne sais pas si mon image est claire, mais c’est la seule que j’ai trouvé…

La propriété qui permet de réaliser cet effet c’est animation-timing-function. Si  ça te dis quelque chose c’est sans doute à cause d’une propriété donc nous avons parlé dans l’article précédent, transition-timing-function. Et bien ça tombe bien puisque ces propriétés peuvent avoir les mêmes valeurs:

  • step-start: l’animation passe immédiatement à l’état final,
  • step-end: l’animation passe directement à l’état final à la fin de la durée de l’animation sans l’exécuter.
  • step(): chaque étape est découpée en séquence, c’est cet effet qui donne un effet saccadé. Entre les parenthèses, on saisit le nombre de découpage qu’on veut appliquer à chaque étape.

Je te propose maintenant de retourner sur Codepen pour voir le rendu:

  • A gauche l’animation va s’exécuter par accoup,
  • A droite, le mouvement va être beaucoup plus fluide.

La compatibilité

Encore une fois, toutes ces propriétés sont expérimentales et il nous faut utiliser les préfixes, -webkit-, -moz-, -o-, ce qui nous contraint à réécrire toutes la séquences  plusieurs fois! Autant te dire que tu as intérêt à utiliser la super propriété animation, pour limiter le nombre le ligne!

Voilà donc à quoi pourra ressembler le code pour que ton animation puisse être exécutée sur tous les navigateurs.

@-webkit-keyframes monScenario{ /*Préfixe pour Chrome et Safari*/

	Ici l'étape 1{
	...
	}

	Ici l'étape 2{
	...
	}

	Ici l'étape 3{
	...
	}

}


@-moz-keyframes monScenario{ /*Préfixe pour Firefox*/

	Ici l'étape 1{
	...
	}

	Ici l'étape 2{
	...
	}

	Ici l'étape 3{
	...
	}

}

@-o-keyframes monScenario{ /*Préfixe pour Opéra*/

	Ici l'étape 1{
	...
	}

	Ici l'étape 2{
	...
	}

	Ici l'étape 3{
	...
	}

}

@keyframes monScenario{ /*Propriété sans préfixe*/

	Ici l'étape 1{
	...
	}

	Ici l'étape 2{
	...
	}

	Ici l'étape 3{
	...
	}

}
.bloc:hover{
	-webkit-animation: monScenario 4s ease-in;
	-moz-animation: monScenario 4s ease-in;
	-o-animation: monScenario 4s ease-in;
	animation: monScenario 4s ease-in;
}

Je suis un peu perdu car dans le cours d’Openclassrooms, ils utilisent uniquement le préfixe webkit pour tous les navigateurs alors que dans le MDN, je crois comprendre qu’il faut indiquer le préfixe propre à chacun d’entre eux. Sur Can I Use, je comprends que tous les navigateurs ont implémentés la déclaration @keyframes. Comme quoi, trop d’info, tue l’info… J’ai quand même l’impression qu’à la date où j’écris cet article, tout dois bien se passer, donc on se contentera d’ajouter au minimum le préfixe -webkit-, pour que ça fonctionne sous Android…comme indiqué sur Can I Use.

 Il existe des solutions alternatives pour éviter de noter les préfixes et donc d’augmenter les lignes de code et les erreurs…

Outils pour se passer des préfixes

En suivant le cours d’Openclassrooms, je découvre qu’il existe un site web qui proprose un script Javacript qui permet de se passer d’utiliser les préfixes. Ce qui permet bien sûr de garder un code plus léger et lisible. Je ne peux pas tester comment ce script fonctionne, parce que  je travaille sous Mac et  jusque là tout fonctionne tout le temps… Et je n’ai pas de vieille version de windows notamment pour vérifier ça.Mais c’est tout de même bon à savoir. Voici le lien qui te mènera à ce script. Pour le télécharger, clique sur le bouton en haut à gauche de la page. Il doit juste falloir insérer ce script dans le ficher.js de ton site ou en fin de page HTML, dans une balise HTML script.

Autre possibilité que je ne connais pas encore, c’est d’utiliser les pré-processeurs SASS ou LESS, et de créer des mixin. je te redirige vers un article de blog que j’ai trouvé très intéressant à ce sujet. Il s’agit d’un article issu du blog de Patrice Laurent, « SASS Mixin préfixe des navigateurs« .

Le repère

Petite précision, je rajoute un détail qui m’a donné un peu de mal, les repères.

N’oublie pas dans quel repère tu travailles sinon tes animations risque de faire le contraire de ce que tu souhaites:

  • L’axe des X est horizontale de gauche à droite,
  • L’axe des Y est verticale de haut en bas.

Donc pour faire remonter un élément, tu dois indiquer une translation négative (-100px) par exemple.

Je me suis fais avoir avec ça, donc si je peux t’éviter le même problème… J’ai ajouté une petits animation sur Codepen pour illustrer un peu ça, j’en ai profiter pour utiliser from et to pour définir mes étapes.

J’en ai terminé avec les animations  CSS, je vais passer un peu de temps ce week end pour manipuler tout ça. J’ai quelques petites idées en têtes, donc je verrais si j’ai le temps de tout faire ce week end, j’en mettrais certainement quelques un sur Codepen.

Je te dis à la semaine prochaine, d’ici là bon week-end!

Le prochain article parlera des transformations 3D, puisque c’est le dernier chapitre de la formation sur Openclassrooms. De belles possibilités en perspective…

A bientôt,

Guillaume