CSS Mise en Forme — Animations, transitions
Découvrez l’art de donner vie à vos interfaces web grâce aux animations et transitions CSS ! Cette leçon vous apprendra à créer des effets visuels engageants qui amélioreront l’expérience utilisateur de vos sites web.
Objectifs pédagogiques
- Maîtriser les transitions CSS pour créer des effets fluides
- Comprendre les propriétés d’animation CSS et leur utilisation
- Créer des animations personnalisées avec @keyframes
- Optimiser les performances des animations web
- Appliquer les bonnes pratiques UX pour les animations
Qu’est-ce qu’une transition CSS ?
Les transitions CSS permettent de créer des effets de changement progressif entre deux états d’un élément. Au lieu d’un changement brutal instantané, la transition crée une interpolation fluide entre les valeurs initiales et finales d’une propriété. Cette technique améliore considérablement l’expérience utilisateur en rendant les interfaces plus naturelles et agréables à utiliser.
La propriété transition
La propriété transition est un raccourci qui combine quatre sous-propriétés : transition-property (quelle propriété animer), transition-duration (durée), transition-timing-function (courbe d’animation), et transition-delay (délai avant démarrage). Par exemple, « transition: color 0.3s ease-in-out 0.1s » animera la couleur sur 0.3 seconde avec une courbe ease-in-out après un délai de 0.1 seconde.
Point clé : Les transitions ne s’activent que lors d’un changement d’état, comme :hover, :focus ou via JavaScript
Bonnes pratiques : Utilisez des durées entre 200ms et 500ms pour les micro-interactions, et préférez les transitions sur transform et opacity pour de meilleures performances
À retenir
Les transitions CSS créent des changements progressifs entre états d’éléments, améliorant l’UX par des effets fluides et naturels.
Comprendre les courbes d’animation
Les fonctions de temporisation (timing functions) définissent comment une animation progresse dans le temps. CSS propose plusieurs valeurs prédéfinies : linear (vitesse constante), ease (démarrage lent, accélération, puis ralentissement), ease-in (démarrage lent), ease-out (fin lente), et ease-in-out (démarrage et fin lents). Chaque fonction crée une sensation différente et influence la perception de fluidité.
Fonctions cubic-bezier personnalisées
Pour un contrôle précis, vous pouvez utiliser cubic-bezier() avec quatre valeurs définissant les points de contrôle d’une courbe de Bézier. Par exemple, cubic-bezier(0.68, -0.55, 0.265, 1.55) crée un effet de rebond. Des outils en ligne comme cubic-bezier.com permettent de visualiser et créer ces courbes facilement. Les courbes personnalisées donnent une identité unique à vos animations.
Point clé : La fonction steps() permet de créer des animations par paliers, idéale pour des effets de machine à écrire ou des sprites
Material Design : Google recommande des courbes comme cubic-bezier(0.4, 0.0, 0.2, 1) pour une sensation naturelle et cohérente
À retenir
Les fonctions de temporisation contrôlent la progression des animations et influencent directement la perception de naturel et de fluidité.
Créer des animations personnalisées
Les @keyframes permettent de définir des animations complexes avec plusieurs étapes. Contrairement aux transitions qui nécessitent un déclencheur, les animations peuvent se lancer automatiquement. Vous définissez les étapes clés avec des pourcentages (0% à 100%) ou les mots-clés « from » et « to ». Chaque étape peut modifier différentes propriétés CSS, créant des séquences d’animation sophistiquées.
Propriétés d’animation
La propriété animation combine plusieurs sous-propriétés : animation-name (nom de l’animation @keyframes), animation-duration (durée), animation-timing-function (courbe), animation-delay (délai), animation-iteration-count (nombre de répétitions), animation-direction (sens de lecture), animation-fill-mode (état avant/après), et animation-play-state (lecture/pause). Ces propriétés offrent un contrôle total sur le comportement de l’animation.
Point clé : animation-fill-mode: forwards maintient l’état final de l’animation, backwards applique l’état initial pendant le délai
Performance : Animez de préférence transform et opacity qui déclenchent la composition GPU plutôt que des propriétés layout comme width ou height
À retenir
@keyframes créent des animations multi-étapes complexes avec un contrôle précis sur chaque phase de l’animation.
Les transformations 2D et 3D
La propriété transform est essentielle pour créer des animations performantes. Elle permet de modifier la géométrie des éléments sans affecter le flux du document. Les transformations 2D incluent translate() (déplacement), rotate() (rotation), scale() (redimensionnement), et skew() (inclinaison). Les transformations 3D ajoutent translateZ(), rotateX(), rotateY(), et perspective(), ouvrant de nouvelles possibilités créatives.
Transform-origin et performance
La propriété transform-origin définit le point de référence des transformations. Par défaut centré (50% 50%), il peut être modifié pour créer des effets spécifiques comme des rotations autour d’un coin. Les transformations utilisent la couche de composition du GPU, ce qui les rend très performantes. Combiner plusieurs transformations dans une seule déclaration (transform: translateX(100px) rotate(45deg)) optimise encore les performances.
Point clé : will-change: transform prévient le navigateur qu’une propriété va être animée, optimisant les performances
Astuce 3D : Utilisez transform-style: preserve-3d sur le conteneur pour maintenir la profondeur des éléments enfants transformés
À retenir
Transform offre des transformations géométriques performantes essentielles pour créer des animations fluides et optimisées.
Respecter les préférences utilisateur
La media query prefers-reduced-motion détecte si l’utilisateur a activé l’option « Réduire les mouvements » dans son système d’exploitation. Les personnes sensibles aux mouvements, souffrant de troubles vestibulaires ou d’épilepsie, peuvent ainsi désactiver les animations. Respectez cette préférence en supprimant ou réduisant drastiquement les animations avec @media (prefers-reduced-motion: reduce).
Principes d’animation UX
Les animations doivent avoir un but : guider l’attention, fournir un feedback, ou maintenir la continuité spatiale. Évitez les animations purement décoratives qui peuvent distraire. Respectez la règle des 12 principes de l’animation Disney adaptés au web : timing approprié, facilitation d’entrée/sortie, et cohérence. Les micro-interactions (hover, focus, click) doivent être subtiles mais perceptibles, généralement entre 200 et 300ms.
Point clé : Les animations de chargement et de transition entre pages améliorent la perception de performance même si le temps réel ne change pas
Accessibilité : Assurez-vous que vos animations ne clignotent pas plus de 3 fois par seconde pour éviter les crises d’épilepsie
À retenir
Les animations doivent améliorer l’UX sans nuire à l’accessibilité, en respectant les préférences utilisateur et les bonnes pratiques.
Exercice pratique
? Instructions
Créez une carte de profil animée avec un avatar qui se transforme au survol, des boutons avec des transitions fluides, et une animation d’apparition. La carte doit être responsive et inclure des effets de hover engageants.
Code de référence :
<div class="carte-profil">
<div class="carte-avatar">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar Sarah">
</div>
<div class="carte-info">
<h3 class="carte-nom">Sarah Johnson</h3>
<p class="carte-titre">UX/UI Designer</p>
<p class="carte-description">Passionnée par la création d'expériences utilisateur exceptionnelles et l'innovation digitale.</p>
<div class="carte-liens">
<a href="#" class="carte-lien carte-lien--primary">Portfolio</a>
<a href="#" class="carte-lien carte-lien--secondary">Contact</a>
</div>
</div>
</div>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.carte-profil {
max-width: 400px;
margin: 2rem auto;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
animation: fadeInUp 0.6s ease-out;
}
.carte-profil:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.carte-avatar {
position: relative;
text-align: center;
padding: 2rem 2rem 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.carte-avatar img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid white;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.carte-profil:hover .carte-avatar img {
transform: scale(1.1) rotate(5deg);
}
.carte-info {
padding: 1.5rem 2rem 2rem;
text-align: center;
}
.carte-nom {
margin: 0 0 0.5rem;
font-size: 1.5rem;
font-weight: 600;
color: #333;
transition: color 0.3s ease;
}
.carte-titre {
margin: 0 0 1rem;
color: #667eea;
font-weight: 500;
font-size: 1.1rem;
}
.carte-description {
margin: 0 0 1.5rem;
color: #666;
line-height: 1.6;
font-size: 0.95rem;
}
.carte-liens {
display: flex;
gap: 1rem;
justify-content: center;
}
.carte-lien {
padding: 0.75rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.carte-lien--primary {
background: #667eea;
color: white;
}
.carte-lien--primary:hover {
background: #5a67d8;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.carte-lien--secondary {
border: 2px solid #667eea;
color: #667eea;
background: transparent;
}
.carte-lien--secondary:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
@media (prefers-reduced-motion: reduce) {
.carte-profil {
animation: none;
}
.carte-profil:hover {
transform: none;
}
.carte-profil:hover .carte-avatar img {
transform: none;
}
.carte-lien:hover {
transform: none;
}
}
Monaco Editor v0.45
Récapitulatif
Points essentiels à retenir
- Transitions CSS : Créent des changements progressifs entre états d’éléments, activées par des triggers comme :hover
- Fonctions de temporisation : Contrôlent la progression des animations avec des courbes prédéfinies ou personnalisées cubic-bezier()
- Animations @keyframes : Permettent de créer des séquences complexes multi-étapes avec un contrôle précis sur chaque phase
- Transform : Propriété performante pour les transformations géométriques 2D/3D utilisant la composition GPU
- Accessibilité et UX : Respecter prefers-reduced-motion et créer des animations utiles qui améliorent l’expérience utilisateur
Validez vos connaissances
Testez votre compréhension avec ce quiz de 10 questions :
