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é.
Depuis mon article sur les effets CSS sur les images, j'avais très envie de 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 CSS bluffantes réalisées uniquement avec du code (voire du SCSS, dans certains cas). Régalez-vous !
15 animations CSS vraiment bluffantes !
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 animations CSS que c'est vraiment un langage à privilégier aujourd'hui. Encore une fois, ce n'est qu'un échantillon de ce qu'il est possible de créer avec beaucoup de talent et de créativité. Qu'en pensez-vous ? Lequel préférez-vous ? Avez-vous d'autres exemples à partager ?
