Si vous souhaitez rendre votre site web plus dynamique et attractif, les animations CSS sont un excellent moyen de captiver vos visiteurs. Parmi les techniques les plus puissantes et flexibles, on retrouve les keyframes CSS.
Cette propriété vous permet de définir des séquences d’animations très précises, contrôlant comment un élément va évoluer au fil du temps. Contrairement aux transitions CSS, qui ne réagissent qu’au survol ou à un changement d’état, les keyframes offrent une liberté totale pour créer des mouvements complexes et répétitifs.
Dans ce tutoriel, nous allons explorer en détail les keyframes CSS, comprendre leur fonctionnement, et apprendre à les appliquer à différents types d’éléments HTML. Vous découvrirez des exemples concrets, allant de simples effets de survol à des animations plus complexes, comme des rotations, des déplacements ou des changements de couleur.
Nous adopterons un langage simple et compréhensible, étape par étape, afin que même si vous débutez dans le développement web, vous puissiez suivre et reproduire facilement les exemples. À la fin de ce tutoriel, vous serez capable de créer des animations CSS professionnelles, fluides et captivantes.
- Qu’est-ce qu’une animation CSS avec keyframes ?
- Propriétés clés pour contrôler les animations
- Les fonctions de timing : contrôler la vitesse de vos animations
- Créer des animations plus complexes
- Animation en séquence : créer des mouvements coordonnés
- Conseils pour des animations CSS performantes
- Animer les éléments au survol : hover et keyframes
- Effets avancés : rebonds, rotations et transitions continues
- Combiner plusieurs animations sur un même élément
- Cas pratiques inspirés de sites web modernes
- Optimisation SEO et performance
- Animer vos éléments avec JavaScript et keyframes CSS
- Astuces pour des animations CSS plus créatives
- Cas pratiques avancés
- Pourquoi maîtriser les keyframes CSS
Qu’est-ce qu’une animation CSS avec keyframes ?
En CSS, une animation est un changement d’état progressif d’un élément au fil du temps. Les keyframes, ou images clés, définissent les points de départ, les points intermédiaires et le point final de l’animation.
On peut comparer les keyframes à un scénario pour votre animation : chaque étape définit ce que doit être l’apparence de l’élément à un moment précis. Grâce à elles, vous pouvez contrôler plusieurs propriétés CSS simultanément, comme la position, la couleur, l’opacité ou la taille, et définir des transitions fluides entre chaque étape.
Syntaxe de base
La syntaxe d’un keyframe est simple :
@keyframes nomAnimation {
0% {
/* état initial */
}
50% {
/* état intermédiaire */
}
100% {
/* état final */
}
}Vous commencez par déclarer un nom pour l’animation, puis vous indiquez les pourcentages qui représentent l’avancement de l’animation. Chaque bloc contient les propriétés CSS que vous souhaitez modifier.
Ensuite, pour appliquer cette animation à un élément, vous utilisez la propriété animation :
.monElement {
animation: nomAnimation 3s ease-in-out infinite;
}Dans cet exemple, l’animation dure 3 secondes, utilise une fonction de timing ease-in-out pour une transition douce, et se répète à l’infini.
Faire bouger un élément horizontalement
Imaginons que vous vouliez déplacer un carré d’un côté à l’autre de la page. Vous pouvez écrire :
<div class="carre"></div>.carre {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: deplacer 4s linear infinite;
}
@keyframes deplacer {
0% {
left: 0;
}
50% {
left: 200px;
}
100% {
left: 0;
}
}Ici, le carré commence à left: 0, se déplace jusqu’à left: 200px à mi-parcours, puis revient à sa position initiale. La répétition infinie crée un mouvement continu.
Changer la couleur d’un élément
Vous pouvez également animer les couleurs :
<p class="texte">Bonjour, je change de couleur !</p>.texte {
font-size: 24px;
animation: changerCouleur 5s infinite alternate;
}
@keyframes changerCouleur {
0% {
color: black;
}
50% {
color: blue;
}
100% {
color: red;
}
}La propriété alternate permet à l’animation d’inverser la direction à chaque cycle, créant une transition fluide entre les couleurs.
Bonjour, je change de couleur !
Propriétés clés pour contrôler les animations
Lorsque vous utilisez @keyframes, il est essentiel de connaître les propriétés qui vous permettront de contrôler le comportement de vos animations :
animation-duration: définit la durée totale de l’animation.animation-timing-function: règle la vitesse de progression de l’animation (linéaire, accélération, décélération…).animation-delay: détermine le délai avant que l’animation commence.animation-iteration-count: indique combien de fois l’animation se répète (nombre ouinfinite).animation-direction: définit si l’animation joue en avant, en arrière ou alterne les directions.animation-fill-mode: indique comment l’élément doit se comporter avant et après l’animation.
Ces propriétés peuvent être combinées dans une seule ligne avec animation, ou être séparées individuellement pour plus de clarté.
Les fonctions de timing : contrôler la vitesse de vos animations
Lorsque vous créez une animation avec les keyframes, la vitesse de progression entre chaque étape peut avoir un impact majeur sur l’effet visuel. Pour cela, CSS propose la propriété animation-timing-function, qui permet de définir comment l’animation évolue dans le temps.
Valeurs les plus courantes
1. linear : La vitesse est constante.
animation-timing-function: linear;Cette valeur est idéale pour un mouvement uniforme, par exemple un objet qui glisse d’un point à un autre sans accélération ni décélération.
2. ease : La vitesse commence lentement, s’accélère, puis ralentit vers la fin.
animation-timing-function: ease;C’est le choix par défaut et convient à la plupart des animations fluides et naturelles.
3. ease-in : L’animation commence lentement et s’accélère ensuite.
4. ease-out : L’animation commence rapidement et ralentit à la fin.
5. ease-in-out : Combinaison des deux, avec un démarrage lent, accélération au milieu, puis ralentissement final.
6. cubic-bezier() : Permet de créer des courbes personnalisées, pour un contrôle très précis.
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);Cette fonction peut paraître complexe, mais elle est très puissante pour obtenir des animations très spécifiques, comme des rebonds ou des mouvements élastiques.
Créer des animations plus complexes
Les keyframes permettent de combiner plusieurs propriétés CSS dans une seule animation, ce qui ouvre la porte à des effets beaucoup plus créatifs.
Rotation et translation simultanées
Imaginons que vous souhaitiez faire tourner un cercle tout en le déplaçant :
<div class="cercle"></div>.cercle {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
position: relative;
animation: tournerDeplacer 4s ease-in-out infinite;
}
@keyframes tournerDeplacer {
0% {
transform: rotate(0deg) translateX(0);
}
50% {
transform: rotate(180deg) translateX(150px);
}
100% {
transform: rotate(360deg) translateX(0);
}
}Ici, nous combinons une rotation (rotate) et un déplacement horizontal (translateX), ce qui crée un effet dynamique et visuellement attractif.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Zoom et opacité
Pour attirer l’attention sur un élément au survol, vous pouvez combiner un agrandissement avec un fondu :
<button class="btn">Cliquez-moi</button>.btn {
padding: 15px 30px;
font-size: 18px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}Cette animation attire le regard grâce à un effet de pulsation, parfait pour des boutons ou des call-to-action sur un site.
Animation en séquence : créer des mouvements coordonnés
Dans certains cas, vous souhaitez qu’une série d’éléments animés se déclenche l’un après l’autre, comme des cartes qui apparaissent progressivement ou des icônes qui bougent successivement.
Apparition décalée de plusieurs éléments
<div class="boite">1</div>
<div class="boite">2</div>
<div class="boite">3</div>.boite {
width: 100px;
height: 100px;
background-color: #e74c3c;
color: white;
display: inline-block;
margin: 10px;
opacity: 0;
transform: translateY(20px);
animation: apparaitre 1s forwards;
}
.boite:nth-child(1) {
animation-delay: 0s;
}
.boite:nth-child(2) {
animation-delay: 0.5s;
}
.boite:nth-child(3) {
animation-delay: 1s;
}
@keyframes apparaitre {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}Chaque boîte apparaît progressivement, avec un décalage dans le temps, ce qui crée un effet de séquence naturel et harmonieux. C’est très utile pour des galeries, des listes ou des interfaces modernes.
Conseils pour des animations CSS performantes
Pour que vos animations restent fluides et agréables, il est important de respecter certaines bonnes pratiques :
- Privilégiez
transformetopacityplutôt que des propriétés commewidth,heightoumargin. Les transformations sont traitées par le GPU, ce qui rend les animations plus rapides et moins gourmandes en ressources. - Évitez les animations trop longues. Une durée comprise entre 0,3 et 3 secondes est généralement confortable pour l’œil humain.
- Testez sur différents navigateurs et appareils. Certaines animations peuvent avoir des comportements légèrement différents selon le navigateur ou le type d’écran.
- Utilisez les animations avec parcimonie. Trop d’animations simultanées peuvent distraire l’utilisateur et nuire à l’expérience globale.
Animer les éléments au survol : hover et keyframes
Jusqu’à présent, nous avons vu des animations qui se déclenchent automatiquement ou se répètent à l’infini. Mais souvent, vous souhaitez qu’une animation se déclenche uniquement lorsqu’un utilisateur interagit avec un élément, par exemple en passant la souris dessus.
Zoom au survol
<img src="image.jpg" alt="Exemple" class="image-hover">.image-hover {
width: 200px;
transition: transform 0.3s ease-in-out;
}
.image-hover:hover {
transform: scale(1.1);
}
Ici, nous utilisons transition pour un effet simple et fluide. Mais si vous voulez une animation plus complexe avec plusieurs étapes, vous pouvez utiliser @keyframes :
.image-hover:hover {
animation: zoomHover 0.6s forwards;
}
@keyframes zoomHover {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1.1);
}
}L’élément commence à sa taille normale, grossit légèrement puis se stabilise à un zoom intermédiaire, créant un effet plus naturel et dynamique.
Clignotement au survol
Vous pouvez attirer l’attention sur un bouton ou un texte :
<button class="btn-survol">Survolez-moi</button>.btn-survol {
padding: 12px 25px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-survol:hover {
animation: clignoter 1s infinite alternate;
}
@keyframes clignoter {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}Cette technique est idéale pour signaler un bouton important ou un appel à l’action, tout en restant subtil grâce à la répétition contrôlée.
Effets avancés : rebonds, rotations et transitions continues
Certaines animations peuvent sembler simples mais créer un impact visuel fort. Voici des exemples d’effets plus avancés :
Rebond d’un objet
<div class="ball"></div>.ball {
width: 50px;
height: 50px;
background-color: #e67e22;
border-radius: 50%;
position: relative;
animation: rebond 2s infinite;
}
@keyframes rebond {
0% {
top: 0;
}
30% {
top: 100px;
}
50% {
top: 70px;
}
70% {
top: 100px;
}
100% {
top: 0;
}
}Cet effet simule un rebond naturel, parfait pour des éléments interactifs comme des notifications ou des icônes d’alerte.
Rotation continue avec changement de couleur
<div class="spinner"></div>.spinner {
width: 80px;
height: 80px;
background-color: #3498db;
border-radius: 50%;
animation: tournerCouleur 3s linear infinite;
}
@keyframes tournerCouleur {
0% {
transform: rotate(0deg);
background-color: #3498db;
}
50% {
transform: rotate(180deg);
background-color: #9b59b6;
}
100% {
transform: rotate(360deg);
background-color: #3498db;
}
}Cette animation est particulièrement utile pour des loaders ou indicateurs de chargement, car elle combine mouvement et changement de couleur pour signaler l’activité à l’utilisateur.
Combiner plusieurs animations sur un même élément
Un élément peut subir plusieurs animations en même temps, soit en les combinant dans la propriété animation, soit en les appliquant séparément.
Pulsation et rotation simultanées
<div class="icone"></div>.icone {
width: 60px;
height: 60px;
background-color: #f1c40f;
animation: pulseRotate 2s infinite linear;
}
@keyframes pulseRotate {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(180deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}Ici, l’élément grossit et tourne en même temps. Attention toutefois à bien gérer les transformations, car appliquer plusieurs transform séparés peut entrer en conflit. Dans ce cas, il vaut mieux combiner les transformations dans le même keyframe si nécessaire.
Cas pratiques inspirés de sites web modernes
- Menus animés : Les keyframes permettent de créer des menus déroulants ou des boutons qui apparaissent progressivement avec un léger décalage.
- Galeries d’images : Les images peuvent glisser, zoomer ou changer d’opacité pour un effet de transition plus fluide et agréable.
- Loaders et indicateurs : Les animations continues, comme les rotations ou les rebonds, sont très courantes pour signaler le chargement d’une page ou d’un contenu.
- Micro-interactions : Les petits détails, comme un bouton qui tremble légèrement au survol ou un texte qui change de couleur subtilement, améliorent considérablement l’expérience utilisateur.
Optimisation SEO et performance
Bien que les animations CSS ne soient pas directement liées au SEO, elles ont un impact indirect sur l’expérience utilisateur. Un site agréable à naviguer réduit le taux de rebond et augmente le temps passé sur la page, ce qui est bénéfique pour le référencement naturel.
En termes de performance :
- Privilégiez
transformetopacitypour les animations. - Évitez les animations trop longues ou trop complexes qui peuvent ralentir le rendu sur mobile.
- Testez les animations sur différents navigateurs pour assurer une compatibilité optimale.
Animer vos éléments avec JavaScript et keyframes CSS
Jusqu’à présent, toutes les animations que nous avons vues étaient déclenchées soit automatiquement, soit au survol. Mais pour des sites interactifs, vous pouvez vouloir déclencher des animations en réponse à des actions utilisateur, comme un clic, un scroll ou le chargement d’une page.
Déclencher une animation au clic
<div class="carre-js"></div>
<button id="btn-animer">Animer le carré</button>.carre-js {
width: 100px;
height: 100px;
background-color: #e74c3c;
position: relative;
}
@keyframes deplacementJS {
0% {
left: 0;
}
50% {
left: 200px;
}
100% {
left: 0;
}
}const carre = document.querySelector('.carre-js');
const btn = document.getElementById('btn-animer');
btn.addEventListener('click', () => {
carre.style.animation = 'deplacementJS 2s ease-in-out';
// Permet de relancer l'animation si on clique plusieurs fois
carre.addEventListener('animationend', () => {
carre.style.animation = '';
}, { once: true });
});Grâce à ce script, le carré se déplace uniquement lorsque l’utilisateur clique sur le bouton, et l’animation peut être relancée à chaque clic.
Déclencher une animation au scroll
Les animations au scroll permettent d’attirer l’attention sur un élément lorsqu’il devient visible à l’écran. Cela est souvent utilisé pour des sections de contenu, des images ou des icônes.
<div class="section">
<p class="texte-scroll">Je m’anime quand je suis visible !</p>
</div>.texte-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s, transform 1s;
}
.texte-scroll.visible {
opacity: 1;
transform: translateY(0);
}const texte = document.querySelector('.texte-scroll');
window.addEventListener('scroll', () => {
const rect = texte.getBoundingClientRect();
if (rect.top < window.innerHeight) {
texte.classList.add('visible');
}
});Ici, nous utilisons une transition CSS combinée à JavaScript, mais vous pouvez remplacer la transition par une animation @keyframes si vous souhaitez un effet plus complexe.
Je m’anime quand je suis visible !
Astuces pour des animations CSS plus créatives
- Combiner plusieurs transformations :
translate,rotate,scaleetskewpeuvent être combinées dans une seule animation pour créer des effets plus sophistiqués. - Décaler les animations des éléments similaires : l’utilisation de
animation-delaysur des éléments similaires crée des séquences harmonieuses. - Jouer avec
animation-fill-mode:forwardsoubothpermet de conserver l’état final de l’animation après son exécution. - Optimiser la performance : éviter d’animer des propriétés qui entraînent un recalcul du layout (
width,height,margin) et privilégier les transformations GPU-friendly (transformetopacity). - Tester les interactions sur mobile : certaines animations au survol (
hover) doivent être adaptées sur écran tactile, souvent en utilisant un déclencheur au clic ou au scroll.
Cas pratiques avancés
- Menus animés complexes : combiner translation, opacité et rotation pour créer un menu dynamique qui s’ouvre avec un effet fluide.
- Animations de galerie d’images : alterner translation, échelle et opacité pour un effet de slider attractif.
- Indicateurs de progression : un cercle qui se remplit progressivement grâce à une rotation et un changement de couleur.
- Micro-interactions sur boutons et icônes : pulsation, légère rotation ou rebond pour signaler une action réussie (comme un ajout au panier).
Ces cas pratiques montrent que les keyframes CSS sont extrêmement polyvalentes et adaptées à tous types de sites web, du simple portfolio au site e-commerce interactif.
Pourquoi maîtriser les keyframes CSS
Les keyframes CSS sont un outil puissant pour dynamiser vos pages web et améliorer l’expérience utilisateur. Elles permettent de créer des animations complexes, répétitives ou conditionnelles, avec un contrôle précis sur chaque étape.
Maîtriser les keyframes, c’est pouvoir :
- Créer des animations fluides et naturelles.
- Attirer l’attention sur des éléments importants.
- Améliorer l’interactivité de votre site sans surcharger le JavaScript.
- Optimiser la performance et l’accessibilité de vos animations.
En combinant keyframes, transitions et déclencheurs JavaScript, vous pouvez concevoir des interfaces modernes et engageantes, dignes des sites professionnels d’aujourd’hui. Avec de la pratique, vous serez capable de transformer vos idées en animations captivantes, rendant vos projets web plus attractifs et interactifs.
