24 exemples d'animations CSS pour vous inspirer

L'animation CSS met en mouvement un élément de la page web ou en modifie l'aspect lors d'une action de l'internaute. De nombreux sites utilisent cette propriété CSS : pour attirer l'attention sur une information ou sur un CTA, pour occuper l'attention du visiteur pendant le temps de chargement d'une page, pour rendre la navigation interactive et, de manière générale, pour proposer un site internet dynamique de manière à offrir une expérience utilisateur satisfaisante. Bordure ou bouton animé au survol du curseur, effet d'apparition de texte à l'ouverture de la page web ou encore image en mouvement : il existe une multitude d'animations CSS. Voici 24 exemples d'animations CSS efficaces et populaires conçus via CodePen, pour inspirer le webdesigner.

Comment fonctionne une animation CSS ?

Une animation CSS fonctionne ainsi :

• L'élément à animer est nommé dans le code HTML, pour permettre au CSS de l'identifier. Il peut s'agir d'un élément de texte, d'une image, d'un bouton ou encore d'un tableau.
• Le nom de l'élément à animer est indiqué dans le CSS, puis les propriétés de l'animation sont renseignées. Il est possible de paramétrer les propriétés suivantes : le nom de l'animation « animation-name », la durée d'un cycle d'animation « animation-duration », le délai entre le chargement de l'élément et le début de l'animation « animation-delay », le nombre de répétitions de l'animation « animation-iteration-count » qui peut aller jusqu'à l'infini, la propriété « animation-direction » qui détermine si l'animation fait des aller-retours ou si elle reprend sa position initiale à chaque cycle, ou encore la propriété « animation-play-state » qui permet d'interrompre l'animation.
• Le nom de l'animation « animation-name » est indiqué dans le CSS, puis les @keyframes sont renseignées. Les @keyframes décrivent le comportement de l'élément aux différentes étapes d'un cycle d'animation.

Voici un exemple simple d'animation CSS pour bien comprendre son fonctionnement et sa syntaxe :

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

Dans cet exemple, l'élément à animer est l'élément < div >. Le CSS déclare cet élément et lui attribue des propriétés d'animation : le nom « mon-animation », la durée du cycle, la direction « normal » pour reprendre l'animation du début à chaque cycle, et la valeur « infinite » pour répéter l'animation à l'infini. À la suite du code CSS, les @keyframes déclarent le nom de l'animation « mon-animation » pour décrire son comportement : l'élément < div > est jaune et étroit au début du cycle, et vert et large à la fin du cycle.

Texte en surbrillance

Cette animation CSS ajoute une couleur de surbrillance sur du texte lorsque l'internaute passe le curseur de sa souris sur l'élément. Cela permet d'attirer l'attention sur une information ou sur un lien de redirection, tout en renforçant l'attrait de la page.

See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.

Alternance de mots

Cet exemple d'animation CSS s'applique sur un élément de texte. Différents mots défilent, l'un après l'autre, pour personnaliser le message à délivrer. Il peut s'agir d'une liste des avantages du produit commercialisé par l'entreprise, d'un message de bienvenue traduit en plusieurs langues, ou encore d'une succession de prénoms.

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

Icône de chargement

L'icône de chargement est une animation CSS très répandue. La roue en mouvement occupe l'attention de l'internaute qui patiente, et le conforte dans l'idée que la page est bien en train de charger.

See the Pen Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney) on CodePen.

Points de suspension animés

Comme la roue de chargement, les points de suspension symbolisent le temps d'attente. Pour les mettre en mouvement, il est possible d'utiliser une animation CSS : chaque point rétrécit et s'agrandit alternativement et successivement.

See the Pen CSS Loader with dots by Alexey Peterson (@petersonby) on CodePen.

Pause-café

Si le chargement de la page ou le téléchargement d'un élément prend beaucoup de temps, il peut être amusant, selon l'audience cible, de suggérer à l'internaute de faire une pause-café. Cet exemple d'animation CSS le permet.

See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) on CodePen.

Validation de formulaire

Cette animation CSS est utile pour confirmer à l'internaute qu'il a rempli correctement tous les champs du formulaire. L'icône de validation apparaît au moment où il soumet le formulaire : sa demande est bien prise en compte.

See the Pen Submit Button pure css animation by Dead Pixel (@dead_pixel) on CodePen.

Erreur dans le formulaire

Le comportement du bouton de validation du formulaire peut indiquer à l'internaute qu'il a fait une erreur : mot de passe erroné ou champ manquant, par exemple. L'animation CSS met en mouvement le bouton pour donner l'impression qu'il dit « non ». Dans cet exemple, l'animation permet de notifier un rappel de sauvegarde.

See the Pen Save button wiggle by Donovan Hutchinson (@donovanh) on CodePen.

Case cochée

L'élément HTML checkbox permet de configurer des cases à cocher. Avec une animation CSS, il est possible de personnaliser le comportement de la case lorsque l'internaute la coche. À noter que dans cet exemple, du code JavaScript est nécessaire pour faire fonctionner l'animation.

See the Pen Toggle Switch with a Hole Handle by Jon Kantner (@jkantner) on CodePen.

Image de fond en mouvement

Lorsque les éléments textuels de la page web sont figés, mettre en mouvement l'image de fond permet de rendre le site plus dynamique. Le contraste entre les éléments mobiles et immobiles, en outre, retient l'attention du visiteur. Voici un exemple d'animation CSS avec un astronaute en mouvement.

See the Pen Pure Css Astronaut Animated by Coding Artist (@Coding-Artist) on CodePen.

Animation CSS boule à neige

À l'inverse du précédent exemple, cette animation CSS maintient l'image d'arrière-plan figée : la neige tombe sur le paysage, et uniquement à l'intérieur du globe de la boule à neige.

See the Pen Christmas Snow Globe Animation by Coding Artist (@Coding-Artist) on CodePen.

Graphique dynamique

Cette animation CSS peut par exemple être utilisée sur le site de l'entreprise B2B qui commercialise des outils de reporting. Les barres du graphique avancent et changent de couleur, pour symboliser la progression des chiffres : cet élément ludique attire l'œil du prospect. Les propriétés de taille et de couleur peuvent être modifiées.

See the Pen Logo playtime by Dan Peddle (@dazld) on CodePen.

Zoom au survol

Une animation CSS permet de zoomer un élément image de la page lorsque le visiteur passe le curseur de sa souris. Cet effet offre un aspect visuel ludique, qui rend la navigation d'autant plus agréable. L'effet, dans cet exemple, est discret, dans une optique d'image de marque sobre et élégante.

See the Pen Template: Logo by Alex Katz (@katzkode) on CodePen.

« Vous avez un message »

Cette animation CSS évoque la réception d'un message. Elle peut par exemple être utilisée sur la page web d'un compte client, pour notifier l'arrivée du nouveau message. Mouvement, graphisme et ombre portée : les détails ici sont très soignées, pour un rendu réaliste.

See the Pen Animated CSS Mail Button by Jake Giles-Phillips (@jakegilesphillips) on CodePen.

Café fumant

La tasse de café chaud qui fume projette immédiatement le visiteur du site web en situation. Cette animation CSS peut être ajoutée à la page de contact, pour suggérer au prospect de rencontrer l'équipe à l'occasion d'un moment convivial.

See the Pen Hot Coffee by Zane Wesley (@zanewesley) on CodePen.

Pac-Man

La marque est déposée en Europe, donc inutilisable sans autorisation, mais cette animation a le mérite d'illustrer les possibilités offertes par CSS.

See the Pen Pacman by Riccardo (@Ferie) on CodePen.

Menu à tiroirs

Voici une manière originale de présenter le menu de navigation. Le visiteur du site web ouvre un tiroir après l'autre pour en découvrir le contenu. L'animation CSS suscite ici la curiosité et crée un effet de surprise. Dans cet exemple, le message est clair : « CSS is awesome », en couleurs et en mouvement.

See the Pen Pure CSS Drawers ʕノ•ᴥ•ʔノ ︵ ┻?”?┻ by Jhey (@jh3y) on CodePen.

Animation CSS nuancier

Avec une bonne maîtrise du code, les possibilités sont étendues : jusqu'à concevoir une palette de couleurs qui s'ouvre et se ferme comme un éventail. Cette animation CSS se prête par exemple à une utilisation sur le site web d'une agence de graphisme ou d'une entreprise de peinture.

See the Pen Color Palette with Pure CSS Animation by Nitish Khagwal (@nitishkmrk) on CodePen.

Sous-marin en mouvement

Animer une image grâce à CSS permet de donner vie aux objets. Le niveau de détails dans cet exemple est accru, libre au créateur de modifier les propriétés de mouvement et de couleur.

See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.

Animations CSS d'éléments « title »

Animer le texte des titres d'une page web permet de rompre avec la monotonie et de mettre en valeur les éléments « title ». Dans cet exemple, les animations CSS sont multiples et inspirantes : ombrage, transparence ou opacité, décalage des lettres ou encore zoom avant.

See the Pen Hover Effect for Headers by Olivia Ng (@oliviale) on CodePen.

Image en suspens

Une animation CSS permet de donner l'impression que l'image flotte, en suspens sur la page web. Dans cet exemple, l'icône se déplace lentement de bas en haut puis de haut en bas, sans jamais s'arrêter.

See the Pen Floating Animation - CSS by Mario Duarte (@MarioDesigns) on CodePen.

Animation CSS chat

Le code HTML décrit ici chaque partie de la tête du chat, pour attribuer ensuite des caractéristiques et un comportement distinct à chaque élément avec SCSS. Dans cet exemple d'animation CSS, seules les pupilles et les paupières de l'animal bougent. Le contraste du noir et du blanc ajoute du relief à l'illustration.

See the Pen Pure CSS cat animation by Johan Mouchet (@johanmouchet) on CodePen.

Animation laser

Cette animation a pour effet de projeter des lasers dans la nuit représentée par un arrière-plan bleu sombre. Elle peut par exemple être utilisée pour illustrer la page d'un site en cours de construction. Le code est relativement complexe, et le résultat retient l'attention.

See the Pen The Glowing Loader - Pure CSS Animation by Maxime Rossignol (@Maxoor) on CodePen.

Narration

Avec de l'expérience, CSS permet de raconter une courte histoire. Le scénario est construit étape par étape, chacune d'entre elles ayant ses propres propriétés et @keyframes. Cet exemple laisse entrevoir les possibilités étendues offertes par CSS au créatif inspiré et aguerri.

See the Pen Funny Candle Pure CSS Animation by Kevin David (@kevin_David_k) on CodePen.

Camion en route

Cette animation complexe pourrait par exemple figurer sur une page d'informations, relatives à la livraison des produits du site de e-commerce, ou à la chaîne d'approvisionnement de l'entreprise. Le rendu en tout état de cause est esthétique.

See the Pen Speedy truck by Chris Johnson (@ChrisJohnson) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.