Animations CSS : Améliore Ton Site Web Avec Ces 17 Options

Des animations captivantes qui retiennent ton regard pendant le chargement d’une page web. Des transitions fluides qui te guident sans effort à travers le contenu d’un site. Des explosions soudaines de couleur et de mouvement lorsque tu interagis avec les boutons d’une application.

Bien que subtils, ces éléments influencent grandement ta perception d’une marque et ton expérience numérique globale. Alors, qu’est-ce qui donne vie à ces détails captivants ? Souvent, cela est réalisé avec l’aide des animations CSS.

Dans ce guide, nous t’aiderons à y parvenir avec :

• Une introduction au CSS et aux animations CSS
• Principales raisons pour lesquelles tu devrais essayer les animations CSS
• Les quelques obstacles à l’adoption des animations CSS (avec solutions)
• 17 animations CSS exemplaires à utiliser sur ton appli ou site web
• Comment commencer à ajouter du CSS à ton site web

Découvrir CSS

CSS est l’abréviation de Cascading Style Sheets.

CSS est un langage de code qui dicte comment les éléments graphiques et de contenu d’un site web ou d’une application apparaissent et se comportent. CSS est utile pour personnaliser les couleurs et les polices, positionner et espacer les éléments sur une page, et bien sûr, créer des animations. Il existe des animations CSS « pures » construites uniquement à partir de HTML (Hypertext Markup Language) et de code CSS, et il y a des animations CSS qui intègrent d’autres types de code (comme JavaScript) ou des médias existants (comme les GIFs).

CSS a fait son apparition au début des années 1990 et a évolué de CSS1 à CSS2 puis à CSS3 — la version actuelle et largement utilisée. Dans cet article, nous suivrons la pratique courante consistant à utiliser le terme « CSS » pour faire référence à cette dernière version.

HTML est comme la fondation et l’ossature d’une maison, sans lesquelles la maison ne peut exister. Mais le CSS transforme cette maison avec de la peinture, des finitions et des décorations qui confèrent un style et une fonctionnalité uniques.

Blocs de Construction d’Animation CSS

Les animations CSS utilisent du code CSS pour enchaîner diverses propriétés et valeurs qui font « bouger » les éléments à l’écran.

Les propriétés CSS sont les éléments des animations, telles que l’arrière-plan, le rayon de bordure, la police, la marge, le type de mouvement (comme tourner ou disparaître), etc. Les valeurs complètent les détails autour de ces propriétés d’animation en définissant la couleur, l’alignement, la taille, la durée, la direction, la vitesse, etc.

Examinons les éléments de la règle populaire @keyframes, qui définit les transitions CSS tout au long d’une séquence d’animation, pour un exemple de la manière dont les propriétés et les valeurs fonctionnent ensemble :

• La propriété animation-name donne le nom de l’animation.
• La propriété animation-duration détermine la durée d’une animation. Les valeurs sont généralement affichées en secondes (0s, 4s, etc.).
• La propriété animation-delay spécifie un début d’animation retardé. Sa valeur est également donnée en secondes (-2s, 5s, etc.).
• La propriété animation-iteration-count indique le nombre de fois qu’une animation doit se dérouler. La valeur représente combien de fois tu souhaites que l’animation se répète; par exemple, infinite-alternate la fera continuer indéfiniment.
• La propriété animation-direction indique comment une animation doit se jouer. Les valeurs incluent normal (en avant), reverse, alternate, etc.
• La propriété animation-timing-function décrit la courbe de vitesse. Les valeurs incluent ease-in-out pour un démarrage et une fin doux, cubic-bezier pour créer une courbe de complexité, etc.
• La propriété animation-fill-mode définit l’apparence d’un élément lorsque l’animation n’est pas en cours. Les valeurs incluent forwards pour conserver les valeurs définies par la dernière image clé, etc.

Maintenant, pour tout assembler ! Dans cet exemple de W3Schools, qui attache une animation (nommée « exemple ») à l’élément <div>, tu peux voir que l’élément est un carré de 100px et a un fond rouge. Lorsque l’animation commence, elle se poursuivra pendant 4 secondes alors que le fond passe du rouge au jaune :

/* Le code d'animation */
@keyframes exemple {
from {background-color: red;}
to {background-color: yellow;}
}

/* L'élément auquel appliquer l'animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Remarque : Ceci est juste un exemple. Les animations par images clés ne sont pas le seul moyen de créer des animations CSS, et elles ne sont pas compatibles avec toutes les versions des navigateurs — continue à lire pour plus d’informations et de conseils sur la compatibilité.)

3 Raisons Géniales D’Implémenter Des Animations CSS

Des interactions inoubliables à garantir qu’elles se produisent à la vitesse des attentes modernes, les animations CSS ont beaucoup à ajouter à l’expérience numérique — tant pour toi que pour tes incroyables clients ou visiteurs.

Crée Une Histoire Et Une Expérience Uniques

Les jours où les sites web fonctionnaient comme des panneaux d’affichage numériques sont désormais derrière nous.

Dans l’économie mondiale, les sites web et les applications sont ta meilleure opportunité de raconter l’histoire de ta marque.

Pourquoi te concentrer sur ton histoire ? Parce qu’une excellente histoire distingue ta marque, capte l’attention de ton public idéal, crée des connexions durables et — peut-être le plus important — inspire l’action.

Et ton histoire repose en partie sur les éléments interactifs que tu inclues dans ton expérience utilisateur.

Les animations CSS permettent de créer des expériences uniques qui réagissent et se déplacent avec l’utilisateur, renforçant ainsi le rapport et l’engagement avec l’histoire de votre marque.

Rénove Et Maintiens Avec Moins De Frappes

CSS est un langage de codage organisé et relativement concis. Dans le monde du développement web, il est considéré comme « propre ». Les feuilles de style peuvent généralement être réduites au minimum pour des projets d’applications et de sites web simples.

Cela signifie que lorsque c’est le moment de mettre à jour ton projet, de faire de la maintenance de routine, ou simplement de rafraîchir ton apparence et ton expérience — cela devrait être assez rapide pour localiser où faire le changement, créer ta mise à jour, et l’appliquer sur toute ton interface. Pas besoin de recoder et de déployer beaucoup et beaucoup de fichiers HTML individuels.

Optimise Ta Vitesse

CSS est considéré comme « léger » par rapport à JavaScript et à d’autres langages de programmation, ce qui en fait un excellent outil pour ajouter du contenu et des expériences attractives et dynamiques à votre produit — sans également ajouter de poids qui ralentit le chargement.

De plus, cela a aussi tendance à être mis en cache de manière agressive. Ensemble, ces facteurs signifient que les animations construites avec CSS devraient apparaître rapidement après ce premier clic, ainsi que lors des chargements ultérieurs de ton site web ou application.

En tant que facteur de classement important en ce qui concerne les résultats de recherche Google, la vitesse est quelque chose à laquelle toutes les entreprises ayant une présence en ligne devraient penser.

Considérations Avant De Plonger Dans Les Animations CSS

Nous entrons maintenant dans la zone de ralentissement. Avant de te lancer à corps perdu dans les animations CSS, il y a quelques petits obstacles dont nous voulons nous assurer que tu es conscient et prêt à gérer.

Problèmes De Compatibilité

As-tu déjà remarqué comment certaines fonctionnalités semblent disparaître ou gêner lorsque tu interagis avec un site web sur ton téléphone — ou ralentissent considérablement ton ordinateur ?

Différents appareils (téléphones mobiles, montres intelligentes, tablettes, ordinateurs, etc.) et navigateurs (Chrome, Safari, Firefox, etc.) sont tous construits avec différentes technologies. Ces technologies signifient que la manière dont ils interagissent avec les langages de code peut varier — et c’est pareil dans le cas des animations CSS.

Si tu ne fais pas de réglages personnalisés, un effet d’animation qui semble incroyablement cool sur Firefox avec ton ordinateur portable peut sembler ou agir de manière étrange pour quelqu’un qui le regarde sur Safari avec son téléphone.

Les tests d’assurance qualité (QA) sont essentiels pour garantir que vos animations CSS sont compatibles partout où les utilisateurs interagissent avec votre présence numérique.

Solution : Utilise un validateur CSS et les outils de développement de navigateur pour identifier les problèmes de compatibilité et les erreurs lors de la création de CSS. Ceux qui sont particulièrement compétents en code peuvent installer une bibliothèque de mixins Sass telle que Bourbon pour maintenir les préfixes de navigateur (webkit pour Chrome et Safari, moz pour Firefox, etc.) à jour et compatibles.

17 Animations CSS Dynamiques À Essayer Aujourd’hui

Prêt à utiliser des animations CSS pour créer des expériences numériques incroyables qui attirent et retiennent les utilisateurs ? Prêt à augmenter la vitesse du site si importante, et à réduire le temps de maintenance et de redesign ?

Alors tu es au bon endroit ! Nous avons compilé des animations CSS impressionnantes pour ton plaisir visuel. Clique sur une option qui te plaît pour obtenir le code nécessaire, et ensuite tu peux l’ajouter à la feuille de style de ton site web. (À titre d’information, les Pens publics sur CodePen sont libres d’utilisation par quiconque à n’importe quelle fin selon les détails de leur licence.)

Animations De Chargement

Les animations de chargement ne sont peut-être pas la catégorie la plus excitante des animations CSS, mais elles sont cruciales pour l’expérience utilisateur. Les visiteurs d’applications et de sites web sont plus susceptibles de faire preuve de patience face à un temps de chargement lorsqu’on leur a indiqué qu’une chose géniale arrive bientôt.

1. “Chargeur CSS avec des points” par Aliaksei Peterson

Dès maintenant, une ligne de points pulsants est universelle pour « Un instant ! » Tout comme le code, cette option est claire et concise, ce qui en fait un bon choix pour une présence en ligne au ton sérieux ou au style minimaliste.

Voir le Pen
Loader CSS avec des points par Aliaksei Peterson (@petersonby)
sur CodePen.

2. “Des Spinners de Chargement Simples en HTML & SVG” par Stephen Delaney 

Un autre symbole de chargement classique — le spinner. Cette animation propose une option pour intégrer un SVG, qui signifie Scalable Vector Graphic, pouvant être redimensionné sans perte de qualité.

Voir le Pen
Simple HTML & SVG Loading Spinners par Stephen Delaney (@sdelaney)
sur CodePen.

3. “Animation de Chargement” par Mohamed Yousef

Cet ensemble de formes en larmes qui tournent offre une animation magnifiquement simple dans laquelle se perdre, rendant un peu de temps de chargement supplémentaire beaucoup moins ennuyeux. Que pourrais-tu demander de plus ?

Voir le Pen
Animation de chargement par Mohamed Yousef (@Freeps2)
sur CodePen.

4. “Seulement Css Animation #02” par Hisami Kurita

Une animation CSS pure impressionnante qui nous rappelle l’entrée sur le site web d’un restaurant ou d’un hôtel haut de gamme. Change la couleur et le nom pour correspondre à ta propre marque.

Voir le Pen
Animation CSS Uniquement #02 par Hisami Kurita (@hisamikurita)
sur CodePen.

5. “The Glowing Loader – Pure CSS Animation” par Maxime Rossignol

L’écran de chargement le plus créatif que nous ayons vu, cette animation offre beaucoup à regarder en attendant que le reste de tes éléments numériques prenne vie.

Voir le Pen
Le Loader Lumineux – Animation CSS Pure par Maxime Rossignol (@Maxoor)
sur CodePen.

Animations de Contenu

Tu cherches un moyen de t’assurer que les utilisateurs de ton appli et de ton site web ne manquent pas des informations cruciales ? Mets-les en évidence avec l’une de ces animations CSS.

6. “Animation de Texte Modifiable en CSS” par Coding Yaar

Ajoute un peu d’éclat aux titres et autres textes importants avec cette animation, incluant des détails comme le mouvement de glissement, les changements de couleur, et plus encore.

Voir le Pen
Animation de texte en changement CSS par Coding Yaar (@codingyaar)
sur CodePen.

7. “Effet de Révélation de Bloc CSS” par Abubaker Saeed

L’effet « révélateur » avec cette animation offre encore une autre manière intéressante d’attirer l’œil sur les éléments de contenu importants que tu veux t’assurer que les visiteurs ne manquent pas.

Voir le Pen
Effet de révélation de bloc CSS par Abubaker Saeed (@AbubakerSaeed)
sur CodePen.

8. “Curseur de Révélation CSS” par Adam Kuhn

Avec de nombreuses polices intéressantes, des boutons animés et une fonction de retournement qui révèle plus d’informations — cela semble être une excellente option pour initier les utilisateurs à des sections plus longues de contenu incontournable comme les FAQ, les fonctionnalités, etc.

Voir le Pen
CSS Reveal Slider par Adam Kuhn (@cobra_winfrey)
sur CodePen.

9. “Carte d’Information Animée” par Adam Kuhn

Du même créateur que l’animation CSS précédente, cette option présente une autre manière audacieuse et créative de guider les utilisateurs à travers les éléments de l’histoire de votre marque.

Voir le Pen
Carte d’info animée par Adam Kuhn (@cobra_winfrey)
sur CodePen.

Animations de Bouton

Les boutons sont souvent le moyen d’amener les utilisateurs à agir ou à approfondir ton contenu. Inspire l’interaction en ajoutant des animations CSS aux boutons importants.

10. “Effet de Glissement au Survol du Bouton CSS” par RazorX

De nombreuses options ici pour ajouter des animations de remplissage de couleur cool à des boutons autrement simples.

Voir le Pen
Effet de glissement au survol du bouton CSS par RazorX (@RazorXio)
sur CodePen.

11. “Animations de Boutons” par Alex Belmonte

Tu veux ajouter un peu de mouvement à ces boutons ? Ajoute un effet de survol et des actions comme le rebondissement, le tremblement et plus encore à tes boutons avec ce CSS.

Voir le Pen
Animations de Bouton par Alex Belmonte (@AlexBelmonte)
sur CodePen.

12. “Effet de survol de bouton CSS” par Julia

Une touche minimale mais impactante de couleur ajoute une surprise et du plaisir à tes boutons.

Voir le Pen
Effet de survol de bouton CSS par Julia (@sfoxy)
sur CodePen.

Animations D’arrière-Plan

Tu veux que les arrière-plans de certains éléments de ton site web ou application soient juste assez intéressants pour attirer l’œil — sans éclipser ce que tu veux que les utilisateurs lisent et fassent.

13. “Dégradé de Fond Animé” par Mario Klingemann

Applique cette boucle de couleurs infinie à l’arrière-plan des sections clés de ton site web ou application pour ajouter une touche de mouvement.

Voir le Pen
Dégradé d’arrière-plan animé par Mario Klingemann (@quasimondo)
sur CodePen.

14. “Animations CSS avec des SVG” par Joyanna

Des formes douces et colorées avec des mouvements délicats créent un arrière-plan distinctif pour tes sections de contenu les plus importantes.

Voir le Pen
Animations CSS avec des SVG par Joyanna (@joyanna)
sur CodePen.

15. “Défilement Parallaxe Simple” par Ungmo Lee

Une animation de défilement parallaxe permet au premier plan et à l’arrière-plan de bouger, mais à des vitesses différentes pour créer une illusion de profondeur. Comme tu peux le voir dans l’exemple, l’effet parallaxe peut être accablant lorsqu’il n’est pas appliqué avec modération.

Voir le Pen
Défilement parallaxe simple par Ungmo Lee (@ungmo2)
sur CodePen.

Animations Partout

Essaie ces animations CSS juste pour le plaisir pour ajouter un peu de *piment* à différents moments de l’expérience utilisateur.

16. “Modèle : Logo” par Alex Katz

Passe la souris sur le logo pour voir un léger effet d’expansion. Ce mouvement subtil peut être utilisé sur les logos ainsi que sur les boutons, les icônes et autres composants.

Voir le Pen
Template : Logo par Alex Katz (@katzkode)
sur CodePen.

17. “Animation Flottante – CSS” par Mario Duarte

Un effet de flottement doux comme celui-ci est une autre touche surprenante et amusante qui montre aux visiteurs que tu tiens à tes propriétés numériques ainsi qu’à leur expérience.

Voir le Pen
Animation Flottante – CSS par Mario Duarte (@MarioDesigns)
sur CodePen.

Comment Ajouter Du CSS À Ton Site Web

Chacune des animations CSS ci-dessus est accompagnée de HTML, CSS, et parfois d’autres codes que tu peux coller directement dans ta feuille de style de site web et modifier selon tes besoins pour en faire ta propre version.

Si tu as un site web personnalisé où tu gères le code et que tu n’es pas encore familier avec le CSS, nous pensons qu’il serait utile pour toi de connaître le langage avant d’essayer de mettre en œuvre les animations ci-dessus. Apprends les bases de la création d’une ligne de code puis plonge dans les meilleurs tutoriels pour développer tes compétences en CSS avec le guide de DreamHost pour apprendre le CSS.

Tu remarqueras à partir des exemples ci-dessus que cela peut nécessiter pas mal de code pour créer une animation. Si tu te sens à l’aise avec le CSS et que tu es prêt à optimiser l’espace et le temps, envisage d’utiliser une bibliothèque d’animations CSS. Chaque bibliothèque aura des instructions sur comment l’ajouter à ton site web, généralement en ajoutant un fichier source ou un CDN à ton balisage. Une fois installée, tu peux utiliser les raccourcis d’animation spécifiques de la bibliothèque pour ajouter tes animations.

Si tu utilises un site WordPress, la plateforme offre elle-même un guide pratique pour modifier le CSS en utilisant soit l’éditeur de site (une fonctionnalité bêta disponible sur certains thèmes) soit le personnalisateur (disponible sur la plupart des thèmes classiques et certains thèmes tiers). C’est dans ces écrans d’édition que tu colleras le code de nos exemples d’animation CSS ci-dessus.

Mais que faire si un site web qui te permet de raconter l’histoire de ta marque n’est encore qu’un rêve ? Alors nous avons de bonnes nouvelles, car chez DreamHost nous spécialisons dans la réalisation des rêves de sites web. Avec un design web personnalisé, un créateur de site web WordPress facile à utiliser, les services pro de nos experts internes, et bien sûr de robustes options d’hébergement — DreamHost t’aidera à mettre ton rêve en ligne.