La majorité des développeurs web sous-exploitent les fonctionnalités d’animation du CSS. Coincés entre complexité de la syntaxe et manque d’exemples concrets, ils se limitent bien souvent à des transitions et animations basiques qui manquent de punch.
Cet article va dissiper le mystère des animations CSS et vous donner les clés pour créer facilement des animations bluffantes de qualité professionnelle. Nous allons découvrir ensemble les concepts fondamentaux, la syntaxe des @keyframes, les propriétés d’animation, et vous guider étape par étape à travers des exemples concrets pour réaliser des animations époustouflantes uniquement avec du code CSS.
Oubliez ces tutoriels avec des cas d’usage limités. Ici, vous découvrirez tout le potentiel créatif des animations CSS à travers des démos interactives variées. De quoi vous inspirer et repousser les frontières de ce que vous pensiez possible en matière d’effets complexes et innovants !
Il est temps de découvrir comment donner vie et mouvement à vos pages web grâce aux incroyables pouvoirs des animations CSS.
Qu’est-ce qu’une animation CSS ?
Une animation CSS permet de modifier progressivement les propriétés d’un élément afin de lui donner l’illusion du mouvement et de la vie. Concrètement, il s’agit de définir des règles sur la manière dont un élément doit se transformer, que ce soit sa position, sa taille, sa couleur, sa forme, son opacité, etc.
Par exemple, on peut utiliser une animation pour faire se déplacer progressivement une image du haut vers le bas de la page, paraissant ainsi « descendre » l’écran. Ou encore pour faire changer la couleur du texte au survol de la souris, donnant une impression de dynamisme.
Les animations CSS présentent de nombreux avantages :
- Elles sont implémentées directement via des règles CSS dans le code source, sans nécessiter de JavaScript. Cela simplifie leur maintenance.
- Le navigateur se charge de gérer le rendu de l’animation, ainsi les performances sont optimisées.
- On contrôle précisément la durée, le nombre de répétitions, le sens ou encore le délai de l’animation. Le niveau de personnalisation est infini.
- Les animations CSS s’intègrent parfaitement dans une architecture web moderne basée sur les CSS. Elles complètent harmonieusement les transitions CSS.
Ainsi, une animation se construit à l’aide de deux ingrédients : la description des étapes clés via des @keyframes et l’utilisation de propriétés dédiées pour contrôler la durée, le déclenchement, etc.
Nous allons explorer en détail ces concepts dans la suite de l’article. Gardez simplement à l’esprit qu’une animation CSS dynamise n’importe quel élément de la page en manipulant ses propriétés visuelles au fil du temps.
Quelles sont les différences entre une animation et une transition CSS ?
Une animation CSS et une transition CSS ont toutes deux pour but de créer un effet dynamique en faisant varier les propriétés d’un élément web au cours du temps.
Toutefois, plusieurs différences clés existent :
- Une transition requiert un déclencheur pour s’activer (survol de la souris, focus, etc.), alors qu’une animation CSS démarre automatiquement dès le chargement de la page.
- Une transition ne permet de styler QUE deux états : le style initial et le style final de l’élément. À contrario, une animation utilise des keyframes pour décrire plusieurs états intermédiaires si nécessaire.
- Par conséquent, les animations CSS offrent des effets bien plus complexes, avec des variations non linéaires (accélération, multiples changements de directions, etc.). Les transitions sont plus limitées à un simple changement progressif entre deux états.
- Autre atout des animations : on peut contrôler très précisément leur déroulement à l’aide d’événements JavaScript (pause, lecture, remise à zéro). Ce contrôle dynamique est impossible avec une transition.
En résumé, les transitions conviennent pour des effets simples dépendant d’un déclencheur (changer la couleur au survol, agrandir une image au focus). Dès que l’on souhaite créer des effets complexes basés sur des changements multiples de propriétés, les animations CSS offrent le contrôle et la puissance nécessaires.
Par ailleurs, c’est en combinant animations et transitions que l’on obtient la flexibilité maximale pour dynamiser n’importe quel type de contenu web !
Comment créer une animation CSS ?
La création d’une animation CSS se fait en 2 étapes :
1. Définir des règles de style intermédiaires grâce aux @keyframes
La règle @keyframes est le cœur du moteur d’une animation CSS. Elle permet de définir les différentes étapes intermédiaires par lesquelles va passer un élément animé.
La syntaxe de base est la suivante :
@keyframes nomAnimation {
0% {
// style à 0%
}
50% {
// style à 50%
}
100% {
// style final à 100%
}
}On voit que l’on utilise des pourcentages entre accolades pour déterminer à quel moment du déroulement doit s’appliquer tel style CSS.
Ces pourcentages représentent le timescale (échelle de temps) de l’animation. 0% correspond au début, 100% à la fin.
On peut définir autant d’étapes intermédiaires que nécessaire pour obtenir un mouvement complexe. Les navigateurs se chargeront d’interpoler les styles entre chaque keyframe.
Par exemple pour une animation de boule rebondissante :
@keyframes rebond {
0% {
transform: translateY(0);
}
40% {
transform: translateY(-200px);
}
60% {
transform: translateY(-100px);
}
80% {
transform: translateY(-150px);
}
100% {
transform: translateY(0);
}
}2. Utiliser les propriétés d’animation sur l’élément désiré
Une fois les @keyframes définies, il faut utiliser les propriétés d’animation pour contrôler précisément le comportement de l’animation sur un élément cible.
Les propriétés principales sont :
- animation-name : indique le nom de l’animation à appliquer, tel que défini dans les @keyframes.
- animation-duration : la durée de l’animation, par exemple 5s.
- animation-timing-function : comment accélérer ou ralentir l’animation, avec des valeurs comme ease-in, linear, ease-out, etc.
- animation-delay : délai avant le début de l’animation, utile pour échelonner des animations en cascade.
- animation-iteration-count : nombre de répétitions de l’animation, infinite pour un nombre infini.
- animation-direction : sens de lecture de l’animation à chaque cycle.
Par exemple, pour animer le déplacement d’un nuage sur 5 secondes avec un effet accéléré au début :
.cloud {
animation-name: défilé;
animation-duration: 5s;
animation-timing-function: ease-in;
}
@keyframes defile {
from {left: 0%;}
to {left: 100%;}
}En combinant ces propriétés, les possibilités deviennent infinies. On peut créer des animations extrêmement complexes en jouant sur les durées, les délais, le nombre de répétitions, etc.
Exemples d’animations
Animation de chargement circulaire
L’animation d’éléments de chargement est un excellent moyen d’indiquer visuellement à l’utilisateur qu’une tâche est en cours (recherche de résultats, traitement de données, etc).
Les animations CSS permettent de créer facilement ce type d’indicateur de progression de manière dynamique, sans recourir aux images.
Prenons le cas d’un cercle qui se remplit progressivement pour matérialiser l’avancement d’un chargement. Voici le code :
HTML :
<div class="loader">
<div class="cercle"></div>
</div>CSS :
.cercle {
width: 5rem;
height: 5rem;
border: 0.5rem solid #ccc;
border-top-color: deeppink;
border-radius: 50%;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}Analysons en détail le fonctionnement :
- La div .cercle définit le cercle animé avec une bordure grise et bordure rose en haut servant d’indicateur.
- La règle @keyframes rotation indique une rotation de 0 à 360 degrés.
- Cette animation sans fin (infinite) est appliquée au cercle.
Résultat : on obtient un indicateur circulaire de chargement animé 100% en CSS, modulable à l’infini ! Le JavaScript n’est même pas nécessaire.
Animation texte défilant
Faire défiler un texte est un excellent moyen d’afficher des notifications, actualités ou messages promotionnels de manière élégante.
Plutôt que d’utiliser du JavaScript, on peut réaliser cet effet directement en CSS grâce aux animations. Voici comment procéder :
HTML:
<div class="defilement">
<p>Mon super texte qui défile tout seul</p>
</div>CSS :
.defilement p {
animation: defile 10s linear infinite;
white-space: nowrap;
}
@keyframes defile {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}Explications :
- La div conteneur permet d’encapsuler le texte à animer.
- La règle p empêche le texte de passer à la ligne avec white-space: nowrap;
- L’animation « defile » translate le texte de 100% à -100% pour créer un mouvement horizontal.
- Avec une durée de 10s et infinite, le défilement est continu.
En ajoutant plusieurs éléments les uns après les autres avec des délais, on crée facilement un ticket d’information infini, le tout en CSS !
Animation de changement de couleurs
Le changement de couleurs est un excellent moyen d’attirer le regard ou de matérialiser des interactions. Animons la modification d’une palette de couleurs sur un titre pour dynamiser la présentation.
HTML :
<h1>Mon super titre coloré </h1>CSS :
h1 {
animation: colors 5s ease-in-out infinite;
}
@keyframes colors {
0% {color: red;}
40% {color: yellow;}
75% {color: green;}
100% {color: blue;}
}Explications :
- L’animation « colors » définit 4 couleurs réparties sur le timescale.
- La propriété CSS color changera progressivement entre ces couleurs.
- Avec une durée de 5s et infini, l’effet arc-en-ciel est continu.
On peut bien sûr complexifier en jouant sur plusieurs propriétés (fond, border, etc).
Conclusion
Les animations CSS offrent des possibilités infinies pour insuffler vie et mouvement à n’importe quel élément d’une page web. Grâce à la puissance des @keyframes et des propriétés dédiées, créer des effets complexes n’a jamais été aussi simple. Que ce soit pour matérialiser des interactions, guider l’utilisateur, dynamiser vos designs ou surprendre vos visiteurs, il est temps de laisser libre cours à votre créativité et d’exploiter le potentiel animé du CSS.
