Animations complexes avec CSS3

Lors du dernier article sur les transitions CSS, vous avez vu comment effectuer des transitions entre les différents états des styles d’un élément. Ces animations étaient simples et linéaires. Aujourd’hui, je vais vous expliquer comment créer des animations un peu plus complexes avec du CSS pur.

Le règle @keyframes

Dans un premier temps, il faudra nommer l’animation afin de la réutiliser. De manière générale, vous pouvez stocker les animations dans des fichiers SASS séparés pour ensuite les compiler en CSS dans un unique fichier. Pour créer et nommer une animation, nous avons besoin de la règle CSS @keyframes  :

Bien sûr, my-animation-name  est le nom que portera notre animation. À l’intérieur de cette règle, nous avons 2 choix. En effet, nous pouvons créer une animation en 2 temps en utilisant les mots clés from et to, ou nous pouvons en créer une en plusieurs états en fournissant un pourcentage compris entre 0 et 100 pour représenter l’état à un certain point dans l’animation. D’ailleurs, vous l’aurez compris, 0% équivaut à from et 100% à to.

Comme premier exemple, je vous propose un indicateur visuel sur un champs qui a le focus. L’animation jouera en boucle et changera progessivement la couleur de la bordure pour ensuite revenir à sa couleur initiale. Pour voir le résultat, regardez ce JSFiddle.

Puis, pour l’utiliser, nous n’avons qu’à ajouter l’attribute animation à notre élément :

Avec ceci, tous nos champs qui auront le focus de l’utilisateur seront animé. Pour comprendre comment la propriété animation fonctionne, il faut savoir qu’elle est en fait un short-hand aux propriétés suivantes :

On pourrait aussi créer des animations un peu plus complexes pour animer, par exemple, un spinner indiquant le chargement.

Spinner de chargement

Le spinner que nous allons créer est constitué de 3 petits cercles qui apparaissent à tour de rôle, puis disparaissent. Pour voir le résultat, regardez ce JSFiddle.

Dans un premier temps, il faut créer les cercles puis les envelopper dans un conteneur.

Et les styles :

Comme vous pouvez voir, les cercles sont animés grâce à une animation personnalisée nommée blob. Cette animation est définie comme ceci :

En gros, on change la taille des cercles grâce à la fonction de transformation scale. Le paramètre de cette fonction correspond à un ratio en pourcentage de la taille d’origine de l’élément. Donc, blob anime les cercles en débutant minuscule (invisible), puis en grossissant l’élément jusqu’à sa taille originelle (10 x 10), pour ensuite refaire disparaitre les cercles.

Finalement, il est possible de faire en sorte que les cercles s’animent à des rythmes différents en leur ajoutant un délai d’exécution. Ce délai est appliqué grâce à la propriété animation-delay :

Et voilà!

Conclusion

Dans cet article, il était question des animations plus poussées avec seulement du HTML et du CSS3. L’avantage d’utiliser CSS au lieu de JavaScript est que l’animation est gérée par le moteur de rendu du navigateur, ce qui rend les animations beaucoup plus fluides. Par exemple, si vous utilisez le navigateur Chrome, votre moteur CSS est Blink.

Si vous avez aimé cet article, aidez-nous en le partageant sur Facebook, Twitter ou LinkedIn!