CSS avancé : animations, transitions, préprocesseurs (Sass)
Maîtrisez les techniques CSS avancées qui donneront vie à vos interfaces ! Découvrez comment créer des animations fluides, des transitions élégantes et optimiser votre workflow avec le préprocesseur Sass pour des feuilles de style plus maintenables et puissantes.
Objectifs pédagogiques
- Créer des animations CSS fluides avec @keyframes et animation
- Implémenter des transitions élégantes pour améliorer l’expérience utilisateur
- Utiliser les transformations 2D et 3D pour enrichir vos interfaces
- Découvrir les avantages de Sass : variables, nesting et mixins
- Organiser et maintenir des feuilles de style complexes avec un préprocesseur
Comprendre le principe des transitions
Les transitions CSS permettent de créer des changements d’état fluides entre deux valeurs de propriétés CSS. Plutôt qu’un changement brutal au survol ou lors d’une interaction, la transition crée une animation automatique qui améliore grandement l’expérience utilisateur. Les transitions s’appliquent aux propriétés qui peuvent être interpolées numériquement : couleurs, dimensions, positions, opacité, etc.
Propriétés essentielles des transitions
La propriété transition accepte quatre valeurs : la propriété à animer, la durée, la fonction de temporisation (ease, linear, ease-in-out) et le délai. Par exemple, transition: all 0.3s ease-in-out; animera toutes les propriétés modifiées sur 0,3 seconde avec une courbe d’accélération douce. Vous pouvez cibler des propriétés spécifiques comme transition: background-color 0.2s, transform 0.4s; pour un contrôle plus précis.
Point clé : Les transitions ne fonctionnent que lors du changement d’état d’un élément (hover, focus, classe ajoutée via JavaScript). Elles ne se déclenchent pas automatiquement au chargement.
À retenir
Les transitions CSS créent des animations fluides entre deux états en interpolant les valeurs des propriétés sur une durée définie.
? Mini-exercice : Créer une transition de couleur au survol
Créez un bouton qui change de couleur de fond de manière fluide quand vous le survolez.
Code de référence :
<button class="btn-transition">Survolez-moi</button>
.btn-transition {
background-color: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-transition:hover {
background-color: #e74c3c;
}
Monaco Editor v0.45
Les transformations 2D essentielles
La propriété transform permet de modifier la géométrie d’un élément sans affecter le flux du document. Les fonctions 2D incluent translate() pour déplacer, scale() pour redimensionner, rotate() pour faire tourner, et skew() pour incliner. Ces transformations peuvent être combinées : transform: translate(50px, 100px) scale(1.2) rotate(45deg);. L’avantage majeur est que ces transformations sont optimisées par le GPU, garantissant des performances fluides.
Explorer les transformations 3D
Les transformations 3D ajoutent la profondeur avec des fonctions comme translateZ(), rotateX(), rotateY() et rotateZ(). Pour activer le contexte 3D, utilisez transform-style: preserve-3d; sur le conteneur parent. La propriété perspective définit la distance de vue et l’intensité de l’effet 3D. Plus la valeur est faible, plus l’effet de perspective est prononcé. Combinez avec backface-visibility: hidden; pour optimiser les performances lors de rotations.
Point clé : Les transformations n’affectent pas la position réelle de l’élément dans le flux du document. L’espace original reste réservé même si l’élément visuellement se déplace.
À retenir
Les transformations CSS permettent de déplacer, redimensionner, faire tourner et incliner des éléments de façon optimisée par le GPU.
? Mini-exercice : Carte avec effet de rotation 3D
Créez une carte qui pivote en 3D au survol pour révéler son verso.
Code de référence :
<div class="card-3d"> <div class="card-front">Recto</div> <div class="card-back">Verso</div> </div>
.card-3d {
width: 200px;
height: 120px;
perspective: 1000px;
margin: 50px;
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-weight: bold;
color: white;
transition: transform 0.6s;
}
.card-front {
background: #3498db;
}
.card-back {
background: #e74c3c;
transform: rotateY(180deg);
}
.card-3d:hover .card-front {
transform: rotateY(-180deg);
}
.card-3d:hover .card-back {
transform: rotateY(0);
}
Monaco Editor v0.45
Définir une animation avec @keyframes
Contrairement aux transitions qui nécessitent un déclencheur, les animations CSS sont autonomes et peuvent se lancer automatiquement. Elles utilisent la règle @keyframes pour définir les étapes de l’animation. Chaque étape peut être définie avec des pourcentages (0%, 50%, 100%) ou les mots-clés « from » et « to ». Dans chaque keyframe, vous définissez les propriétés CSS et leurs valeurs. Le navigateur interpole automatiquement les valeurs entre chaque étape, créant un mouvement fluide.
Propriétés de contrôle des animations
La propriété animation combine plusieurs sous-propriétés : animation-name (nom du @keyframes), animation-duration (durée), animation-timing-function (courbe d’animation), animation-delay (délai), animation-iteration-count (nombre de répétitions), animation-direction (sens de lecture), et animation-fill-mode (état avant/après). Par exemple : animation: slideIn 2s ease-out 0.5s infinite alternate both; créera une animation nommée « slideIn » de 2 secondes, avec délai de 0.5s, répétée infiniment en alternance.
Point clé : Les animations CSS sont plus performantes que les animations JavaScript car elles peuvent être optimisées par le navigateur et déléguées au GPU.
À retenir
Les animations @keyframes permettent de créer des séquences d’animation complexes et autonomes avec un contrôle précis du timing et des répétitions.
? Mini-exercice : Animation de pulsation infinie
Créez un élément qui pulse en changeant de taille de façon continue et répétitive.
Code de référence :
<div class="pulse-circle"></div>
@keyframes pulse {
0% {
transform: scale(1);
background-color: #3498db;
}
50% {
transform: scale(1.3);
background-color: #e74c3c;
}
100% {
transform: scale(1);
background-color: #3498db;
}
}
.pulse-circle {
width: 80px;
height: 80px;
background-color: #3498db;
border-radius: 50%;
margin: 50px auto;
animation: pulse 2s infinite ease-in-out;
}
Monaco Editor v0.45
Pourquoi utiliser un préprocesseur CSS ?
Sass (Syntactically Awesome Stylesheets) est un préprocesseur qui étend les capacités de CSS en ajoutant des fonctionnalités de programmation. Il permet d’écrire du code plus maintenable, réutilisable et organisé. Sass compile vers du CSS standard, compatible avec tous les navigateurs. Les deux syntaxes principales sont SCSS (proche de CSS avec des accolades) et Sass indenté (sans accolades ni points-virgules). SCSS est généralement préférée car plus proche de CSS classique.
Variables et imbrication (nesting)
Les variables Sass commencent par le symbole $ et permettent de stocker des valeurs réutilisables : couleurs, polices, dimensions. Exemple : $primary-color: #3498db;. Le nesting permet d’imbriquer les sélecteurs, reflétant la structure HTML et améliorant la lisibilité. L’opérateur & fait référence au sélecteur parent, pratique pour les pseudo-classes : &:hover. Attention à ne pas abuser du nesting (maximum 3-4 niveaux) pour éviter une spécificité CSS trop élevée.
Point clé : Sass doit être compilé en CSS pour être utilisé dans le navigateur. De nombreux outils comme Node-sass, Dart Sass ou des bundlers intègrent cette compilation automatiquement.
À retenir
Sass améliore CSS avec des variables pour la réutilisabilité et le nesting pour une structure plus claire et maintenable.
? Mini-exercice : Utiliser des variables Sass
Créez un thème de couleurs avec des variables Sass et utilisez le nesting pour styliser un bouton.
Code de référence :
<button class="btn-sass">Bouton Sass</button>
/* Variables Sass */
$primary-color: #3498db;
$hover-color: #2980b9;
$text-color: white;
$border-radius: 8px;
$padding: 12px 24px;
/* Nesting Sass */
.btn-sass {
background-color: $primary-color;
color: $text-color;
padding: $padding;
border: none;
border-radius: $border-radius;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: $hover-color;
transform: translateY(-2px);
}
&:active {
transform: translateY(0);
}
}
Monaco Editor v0.45
Créer et utiliser des mixins
Les mixins sont des blocs de code CSS réutilisables définis avec @mixin et appelés avec @include. Ils peuvent accepter des paramètres pour plus de flexibilité. Par exemple, un mixin pour les boutons : @mixin button-style($bg-color, $text-color: white) { ... }. Les mixins sont parfaits pour les préfixes vendeurs, les patterns complexes (flexbox centering, gradients), ou les media queries répétitives. Ils réduisent la duplication de code et facilitent la maintenance en centralisant les styles communs.
Fonctions et opérations Sass
Sass propose des fonctions intégrées pour manipuler les couleurs (lighten(), darken(), mix()), les chaînes, les nombres et les listes. Vous pouvez créer vos propres fonctions avec @function. Les opérations mathématiques (+, -, *, /, %) permettent des calculs dynamiques. Les fonctions conditionnelles @if, @else et les boucles @for, @each ajoutent une logique programmable. Cette puissance permet de générer du CSS complexe automatiquement.
Point clé : Les mixins génèrent du CSS à chaque utilisation, tandis que l’héritage avec @extend partage le même sélecteur. Choisissez selon le contexte pour optimiser la taille du CSS final.
À retenir
Les mixins et fonctions Sass permettent de créer du code modulaire et réutilisable avec des paramètres personnalisables et des opérations dynamiques.
? Mini-exercice : Créer un mixin pour centrer les éléments
Développez un mixin flexbox réutilisable pour centrer des éléments horizontalement et verticalement.
Code de référence :
<div class="container"> <div class="centered-box">Centré !</div> </div>
/* Mixin pour centrer les éléments */
@mixin flex-center($direction: row) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
/* Fonction pour calculer des tailles responsive */
@function rem-calc($px) {
@return $px / 16 * 1rem;
}
.container {
@include flex-center();
height: 200px;
background-color: #ecf0f1;
}
.centered-box {
width: rem-calc(120);
height: rem-calc(80);
background-color: #3498db;
color: white;
@include flex-center();
border-radius: rem-calc(8);
font-weight: bold;
}
Monaco Editor v0.45
Récapitulatif
Points essentiels à retenir
- Transitions CSS : Créent des animations fluides entre deux états d’éléments avec duration, timing-function et delay
- Transformations 2D/3D : Permettent de déplacer, redimensionner et faire tourner des éléments sans affecter le flux du document
- Animations @keyframes : Définissent des séquences d’animation autonomes avec un contrôle précis du timing et des répétitions
- Variables et nesting Sass : Améliorent la maintenabilité du CSS avec des valeurs réutilisables et une structure hiérarchique claire
- Mixins et fonctions Sass : Offrent une approche modulaire avec des blocs de code réutilisables et des opérations dynamiques avancées
Sources
Pour approfondir vos connaissances :
Validez vos connaissances
Testez votre compréhension avec ce quiz de 10 questions :
