Vous voulez rendre votre site web plus dynamique ? Vous cherchez à attirer l’attention sur un bouton ou à rendre une page de chargement moins ennuyeuse ? Comment faire bouger des éléments sans écrire une ligne de JavaScript ?
L’animation CSS est la solution. Elle vous permet de créer des mouvements et des changements de style directement dans votre feuille de style. Cet article vous guide pas à pas pour maîtriser les animations CSS, des bases aux exemples concrets, même si vous partez de zéro.
Qu’est-ce qu’une animation CSS ? Les 2 piliers fondamentaux
Une animation CSS, c’est simplement un changement de style qui se déroule sur une période de temps définie. Pour que ça marche, vous avez besoin de deux choses qui travaillent ensemble. Pensez-y comme une recette de cuisine : il vous faut les instructions et l’ordre de les exécuter.
Ces deux piliers sont la règle @keyframes et la propriété animation. Il est impossible de faire une animation sans utiliser les deux.
- La règle
@keyframes: C’est le scénario de votre animation. C’est ici que vous décrivez les différentes étapes, comme un story-board. Par exemple : « Au début, l’élément est bleu. À la moitié, il devient rouge. À la fin, il redevient bleu ». - La propriété
animation: C’est la commande qui applique ce scénario à un élément HTML. Vous l’utilisez pour dire : « Prends ce scénario et applique-le à ce bouton, fais-le durer 3 secondes, et répète-le à l’infini ».
En résumé, les @keyframes définissent le « quoi » (les changements de styles) et la propriété animation définit le « comment » (sur quel élément, pendant combien de temps, etc.).
Maîtriser la règle @keyframes : Le cœur du réacteur
La règle @keyframes est la base de toute animation CSS. C’est elle qui contient la séquence des styles que votre élément va suivre. Pour la définir, vous lui donnez un nom, puis vous listez les étapes.
La syntaxe la plus simple utilise les mots-clés from et to. from représente le point de départ (équivalent à 0%) et to représente le point d’arrivée (équivalent à 100%).
/* 1. Définir le scénario de l'animation */
@keyframes change-couleur {
from {
background-color: red; /* Point de départ */
}
to {
background-color: yellow; /* Point d'arrivée */
}
}
/* 2. Appliquer l'animation à un élément */
.mon-element {
width: 100px;
height: 100px;
/* On applique l'animation nommée 'change-couleur' pendant 4 secondes */
animation-name: change-couleur;
animation-duration: 4s;
}Créer des étapes intermédiaires avec les pourcentages
Pour des animations plus complexes, from et to ne suffisent pas. Vous pouvez utiliser des pourcentages pour définir des étapes intermédiaires. Vous pouvez en mettre autant que vous voulez, de 0% à 100%.
Cela permet de créer des séquences plus riches. Par exemple, faire grandir un élément, puis le faire tourner, puis changer sa couleur.
@keyframes mouvement-complexe {
0% {
background-color: red;
transform: translateX(0px); /* Position de départ */
}
50% {
background-color: yellow;
transform: translateX(200px); /* Se déplace de 200px vers la droite */
}
100% {
background-color: red;
transform: translateX(0px); /* Revient à la position de départ */
}
}
.element-anime {
width: 100px;
height: 100px;
position: relative; /* Nécessaire pour que transform fonctionne bien */
animation-name: mouvement-complexe;
animation-duration: 5s;
}La propriété animation et ses sous-propriétés (Tableau récapitulatif)
La propriété animation est en fait une propriété « shorthand » (un raccourci). Elle permet de définir toutes les configurations de votre animation en une seule ligne. C’est plus rapide, mais pour bien comprendre, il faut connaître les sous-propriétés qu’elle regroupe.
Chacune de ces sous-propriétés contrôle un aspect précis du comportement de l’animation. Voici le détail de ce que vous pouvez contrôler.
| Propriété | Description | Exemples de valeurs |
|---|---|---|
animation-name |
Spécifie le nom de la règle @keyframes à utiliser. |
mon-animation, slide-in |
animation-duration |
Définit la durée totale d’un cycle de l’animation. | 2s, 500ms |
animation-timing-function |
Décrit comment l’animation progresse entre les étapes (accélération, vitesse constante…). | linear, ease-in, ease-out, ease-in-out |
animation-delay |
Définit un délai avant que l’animation ne commence. | 1s, -500ms (commence en cours) |
animation-iteration-count |
Indique combien de fois l’animation doit se répéter. | 3, infinite (pour une boucle sans fin) |
animation-direction |
Définit si l’animation doit se jouer en sens inverse sur certains cycles. | normal, reverse, alternate, alternate-reverse |
animation-fill-mode |
Spécifie le style de l’élément quand l’animation n’est pas en cours (avant son début ou après sa fin). | none, forwards, backwards, both |
animation-play-state |
Permet de mettre en pause et de reprendre une animation. | running, paused |
Avec ces propriétés, vous pouvez écrire votre code de deux manières. Soit en décomposant tout, ce qui est plus clair pour débuter, soit en utilisant le raccourci animation.
Version longue et détaillée :
.element {
animation-name: mon-animation;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}animation :
.element {
/* name | duration | timing-function | delay | iteration-count | direction */
animation: mon-animation 3s ease-in 1s infinite alternate;
}4 Exemples concrets d’animations CSS (avec code)
La théorie, c’est bien, mais la pratique, c’est mieux. Voici quelques animations courantes que vous pouvez utiliser directement dans vos projets. Pour chaque exemple, vous avez le code HTML et le CSS nécessaire.
1. Effet de « fondu » à l’apparition (Fade-in)
Cet effet est parfait pour faire apparaître des éléments en douceur lorsqu’une page se charge. L’idée est de passer d’une opacité de 0 (invisible) à une opacité de 1 (visible).
<!-- HTML -->
<div class="fade-in-element">Contenu qui apparaît</div>
<!-- CSS -->
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in-element {
/* animation-name: fadeIn | animation-duration: 2s */
animation: fadeIn 2s;
/* animation-fill-mode: forwards; permet de garder l'état final (opacity: 1) */
animation-fill-mode: forwards;
}2. Effet de « glissement » (Slide-in)
Utile pour faire entrer un élément depuis l’extérieur de l’écran, par exemple pour une notification ou un menu. On joue ici avec la propriété transform.
<!-- HTML -->
<div class="slide-in section class flex-column default-example">
<div class="example-element">Contenu qui glisse</div>
</div>
<!-- CSS -->
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* On peut utiliser ce css pour le slide-in animation linear infinite */
.slide-in {
animation: 1s ease-out 0s 1 slideInFromLeft;
}3. Effet de « pulsation » pour un bouton (Pulse)
Cette animation attire l’œil sur un élément important, comme un bouton d’appel à l’action. On va le faire grossir et rétrécir légèrement en boucle.
<!-- HTML -->
<button class="pulse-button">Cliquez-moi !</button>
<!-- CSS -->
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.pulse-button {
/* Applique l'animation 'pulse' sur 2 secondes, en boucle infinie */
animation: pulse 2s infinite;
background-color: #1766aa;
margin: 20px;
padding: 15px 30px;
border: none;
color: white;
cursor: pointer;
}4. Animation de chargement simple (Spinner)
Un grand classique pour faire patienter l’utilisateur. On crée un cercle qui tourne sur lui-même à l’infini. La clé est d’utiliser une bordure et de la faire tourner.
<!-- HTML -->
<div class="spinner"></div>
<!-- CSS -->
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3; /* Bordure grise légère */
border-top: 5px solid #3498db; /* Bordure bleue pour la partie visible */
border-radius: 50%; /* Pour en faire un cercle */
/* L'animation 'spin' dure 1s, vitesse constante, en boucle */
animation: spin 1s linear infinite;
}Animation vs Transition CSS : Lequel choisir ?
C’est une confusion fréquente. Les transitions et les animations semblent faire la même chose, mais elles répondent à des besoins différents. Le choix dépend de ce que vous voulez accomplir.
- Une transition est faite pour passer d’un état A à un état B. Elle est toujours déclenchée par une action, comme un survol de souris (
:hover) ou un clic. C’est simple, direct et parfait pour des effets d’interface basiques. - Une animation est faite pour des séquences complexes avec plusieurs étapes (de A à B, puis C, puis D…). Elle n’a pas besoin d’être déclenchée par une action, peut démarrer toute seule au chargement de la page et tourner en boucle.
| Critère | Transitions CSS | Animations CSS |
|---|---|---|
| Déclenchement | Action de l’utilisateur requise (:hover, :focus, changement de classe via JS). |
Automatique au chargement de la page, ou via un délai. |
| Complexité | Simple : un état de départ, un état de fin. | Complexe : plusieurs étapes intermédiaires possibles (avec %). |
| Répétition | Non, se joue une seule fois par déclenchement. | Oui, peut se répéter un nombre défini de fois ou à l’infini (infinite). |
| Cas d’usage | Changement de couleur d’un bouton au survol, apparition d’un sous-menu. | Icônes de chargement (spinners), notifications qui apparaissent, effets complexes. |
FAQ – Animation CSS
Comment faire une animation CSS en boucle ?
Pour qu’une animation se répète à l’infini, il suffit d’utiliser la sous-propriété animation-iteration-count avec la valeur infinite. Par exemple : animation-iteration-count: infinite;. C’est idéal pour les spinners de chargement ou les effets de pulsation.
Peut-on mettre plusieurs animations sur un même élément ?
Oui, c’est tout à fait possible. Il faut lister les animations dans la propriété animation en les séparant par une virgule. Par exemple, vous pouvez combiner un effet de glissement et un changement de couleur.
.element {
animation: slide-in 2s, change-color 5s;
}Les animations CSS sont-elles bonnes pour la performance ?
Oui, en général, les animations CSS sont plus performantes que les animations faites en JavaScript. C’est parce qu’elles sont gérées directement par le moteur de rendu du navigateur, qui peut les optimiser (notamment en utilisant l’accélération matérielle). Pour des animations fluides, privilégiez l’animation des propriétés transform et opacity.
