15 animations CSS vraiment bluffantes !

15 animations CSS vraiment bluffantes !

Les propriétés CSS permettent de réaliser aujourd'hui de véritables prouesses esthétiques. Oubliant le défunt Flash, les graphistes et les développeurs frontend l'ont bien compris et s'en donnent à coeur joie pour rivaliser de créativité.

Cela faisait un moment que je voulais vous faire un article pour vous montrer à quel point les CSS peuvent être puissantes et très utiles. D'ailleurs, je vous rappelle que c'est grâce à certaines propriétés CSS (les média queries) que nous avons des sites responsive design depuis 2012. Mais, je m'égare !
Afin d'être intéressant pour le plus grand nombre, cet article ne devait pas être un inventaire à la Prévert des dites propriétés. La solution était donc de vous présenter un éventail (pas forcément objectif, je vous l'accorde) de ce qu'il est possible de réaliser aujourd'hui, rien qu'avec du code.

J'ai donc sélectionné pour vous, 15 animations bluffantes réalisées uniquement avec du CSS (voire du SCSS, dans certains cas). Régalez-vous !

1. Animation d'une bordure

Pure CSS border animation without SVG créé par Rplus (@rplus).

Une utilisation simple mais très efficace des bordures CSS pour créer une animation très élégante de style de chargement.

2. Sous-marin en CSS

Submarine with CSS créé par Alberto Jerez (@ajerez).

On notera ici la très subtile utilisation du conteneur en forme de hublot circulaire qui donne beaucoup de charme à ce gentil sous-marin.

3. Système solaire

Cascading Solar System! créé par Tady Walsh (@tadywankenobi).

Une représentation très réussie de notre système solaire avec une vitesse de rotation à l'échelle, les lunes et les détails sur chacune des plus grandes planètes.

4. Menus et sous-menus

Dropdown Menus créé par Kevin (@Kevin).

Des menus et des sous-menus réalisés très proprement en CSS en jouant avec la propriété transition. Passez votre curseur sur les menus du haut pour faire apparaitre les sous-menus !

5. Carousel Bootstrap 4.1

Bootstrap 4.1.3 Carousel W/Animate css créé par Daryl (@Daryl).

Très jolie amélioration du carousel natif de Bootstrap grâce aux classes animated et zoomInUp. L'aspect responsif a été également retravaillé.

6. Compte à rebours

CodePen Home CSS-Only Countdown Clock créé par Yogev Ahuvia (@Yogev Ahuvia).

Ce très joli compte a rebours d'une heure affiche jusqu'aux centièmes de secondes et on ne se lasse pas de le regarder !

7. Barres de compétences

Animated Responsive Skills Bar créé par Pawan Mall (@Pawan_Mall).

Pour changer les pourcentages et la longueur de la barre correspondante, il vous faut modifier les valeurs dans la partie HTML et dans les CSS.

8. Livre animé

Animated CSS Book créé par Nikola Petrovic (@Fivera).

Si vous avez un e-book à promouvoir ou une landing page à réaliser, ce pen est idéalement fait pour vous (passez votre curseur sur le livre...).

9. Enveloppe animée

Animated CSS Mail Button créé par Jake Giles-Phillips (@Jake Giles-Phillips).

En utilisant judicieusement les propriétés transition et transform, on obtient cette jolie enveloppe animée.

10. Spinners

Pure CSS Spinners créé par John W. Long (@jlong).

Toujours utiles à afficher lors du chargement d'une page, ces animations ne nécessitent que quelques lignes de code pour être mise en oeuvre.

11. Animation d'un SVG

SVG image animated with CSS créé par Elizabet Oliveira (@miukimiu).

Cette jolie animation est réalisée à partir d'un fichier svg où seule la queue du petit chat est animée.

12. Stargate

Stargate with CSS Filters créé par Shane Murphy (@shanomurphy).

En mixant une image de fond, une vidéo et quelques classes CSS, on peut assez facilement recréer la célèbre porte des étoiles.

13. Perspective animée

Animated Css Perspective créé par Kostya (@TakeOnFaith).

La combinaison des classes et des propriétés CSS est ici poussée à un très haut niveau puisque seuls les 3 logos sont des svg !

14. Arrière-plan animé

Animated CSS background créé par Peter Lewicki (@peterlewicki).

Un astuce visuelle permet de faire défiler des nuages sur ce très beau paysage. Saurez-vous la retrouver dans le code ?

15. Le petit chat !

Animated CSS Cat créé par Rafaela Lucas (@rafaelavlucas).

Parce qu'un chaton c'est toujours bon pour le taux de clic et parce que ce pen est aussi très bien fait techniquement !

En conclusion

J'espère vous avoir convaincu au travers de ces 15 exemples que le CSS est vraiment un langage à privilégier aujourd'hui. Encore une fois, ce n'est qu'un échantillon de ce qu'il est possible de réaliser avec beaucoup de talent et de créativité. Qu'en pensez-vous ? Lequel préférez-vous ? Avez-vous d'autres exemples à partager ?

Daniel

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif de plusieurs projets, conférencier et fondateur du JUG Breizh.