Module 3 : Transitions, Transformations et Animations CSS - Donner vie à vos interfaces

Introduction

Les transitions, transformations et animations CSS permettent de créer des interfaces web dynamiques et engageantes sans recourir à JavaScript. Ces techniques offrent la possibilité d'améliorer l'expérience utilisateur en ajoutant du mouvement et de l'interactivité aux éléments HTML, tout en maintenant des performances optimales. Du simple survol de bouton aux animations complexes, CSS offre un arsenal complet d'outils pour animer vos créations web.

Note SCSS : Maintenant que vous maîtrisez SCSS, vous pouvez organiser vos animations dans le fichier styles/styles.scss de votre projet. Utilisez des variables SCSS pour centraliser les valeurs comme les durées, couleurs et fonctions de temporisation, facilitant ainsi la maintenance et la cohérence de vos animations.

Objectifs du cours

• Comprendre et appliquer les transitions CSS pour des animations fluides
• Maîtriser les transformations 2D pour modifier l'apparence des éléments
• Créer des animations complexes avec les keyframes
• Pratiquer la création d'effets visuels modernes et performants
• Utiliser SCSS pour organiser et optimiser le code d'animation

---

Théorie

1 : Les Transitions CSS

Définition

Les transitions CSS permettent de créer des changements progressifs et fluides entre deux états d'un élément. Au lieu d'un changement instantané, la transition anime le passage d'une valeur à une autre sur une durée déterminée.

Les transitions sont idéales pour créer des effets d'interaction simples comme le survol de boutons, les changements de couleur, ou les modifications de taille. Elles s'activent automatiquement lorsqu'une propriété CSS change, généralement via un pseudo-sélecteur comme :hover, :focus ou :active.

Exemple d'une transition simple

Pour créer une transitions, il faut penser à 2 choses :

1. L'état initial de l'élément : cibler en css un élément HTML avec lequel on veut faire une transition et lui donner des propriétés initiales.
2. L'état final de l'élément : cibler en css la façon dont la transition va se faire (par exemple au survol avec :hover) et lui donner les nouvelles propriétés.

/* État initial de l'élément */
.element {
    background-color: blue;
    color: white;
    padding: 20px 40px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    
    /* Définition de la transition : la couleur de fond change en 0.5s avec une fonction de temporisation "ease" */
    transition: background-color 0.5s ease;
}
/* État au survol de l'élément */
.element:hover {
    /* Changement de couleur au survol */
    background-color:red;
}

Paramètres de la propriété transition :

• Paramètre 1 : background-color : la propriété CSS qui va être animée.
  • Si on met all, toutes les propriétés modifiées seront animées.
• Paramètre 2 : 0.5s : la durée de la transition (ici 0.5 secondes)
• Paramètre 3 : ease : la fonction de temporisation qui contrôle la vitesse de la transition (ici une accélération/décélération douce)

Schéma d'une transition CSS :

État initial          Transition (0.5s ease)          État final
background-color: blue  ------------------>  background-color: red

Propriétés des transitions

Les transitions CSS utilisent plusieurs propriétés qui peuvent être combinées ou utilisées séparément :

/* Approche détaillée */
.element {
    transition-property: background-color;  /* Propriété à animer */
    transition-duration: 0.3s;              /* Durée de la transition */
    transition-timing-function: ease-in-out; /* Fonction de temporisation */
    transition-delay: 0.1s;                 /* Délai avant le début */
}

Exemple avec SCSS :

// Exemple avec SCSS : utilisation de variables pour une meilleure maintenance
$transition-duration: 0.3s;
$transition-timing: ease-in-out;
$primary-color: #3498db;
$hover-color: #2980b9;

.element {
    transition: background-color $transition-duration $transition-timing;
}

Exemple avec la syntaxe raccourcie (recommandée) :

/* Approche raccourcie (recommandée) */
.element {
    transition: background-color 0.3s ease-in-out 0.1s;
    /* property duration timing-function delay */
}

/* Animer plusieurs propriétés */
.element {
    transition: background-color 0.3s ease, transform 0.5s ease-in;
}

/* Animer toutes les propriétés (recommandée)  */
.element {
    transition: all 0.3s ease;
}

Important : Toutes les propriétés CSS ne sont pas animables. Les propriétés comme display ou visibility changent instantanément.

Fonctions de temporisation (timing functions)

Les fonctions de temporisation contrôlent la vitesse de la transition au fil du temps (ne pas apprendre par cœur, juste comprendre le principe) :

Fonction	Description
linear	Vitesse constante du début à la fin
ease	Démarre lentement, accélère, puis ralentit (par défaut)
ease-in	Démarre lentement puis accélère
ease-out	Démarre rapidement puis ralentit
ease-in-out	Démarre lentement, accélère au milieu, ralentit à la fin
cubic-bezier(n,n,n,n)	Fonction personnalisée pour un contrôle précis

/* Exemple d'utilisation */
.bouton {
    background-color: #3498db;
    transition: background-color 0.3s ease-out;
}

.bouton:hover {
    background-color: #2980b9;
}

Exemple avec SCSS :

// Avec SCSS : organisation dans styles/styles.scss
$button-color: #3498db;
$button-hover: #2980b9;
$transition-duration: 0.3s;

.bouton {
    background-color: $button-color;
    transition: background-color $transition-duration ease-out;
    
    &:hover {
        background-color: $button-hover;
    }
}

Points importants

• Les transitions ne s'exécutent que lorsqu'une propriété change de valeur
• Il faut définir la transition (transition:) sur l'état initial de l'élément, pas sur l'état :hover
• Les transitions sont réversibles automatiquement

Exercice pratique

Compléter l'exercice 1

---

2 : Les Transformations 2D

Définition

Les transformations CSS permettent de modifier l'apparence visuelle et la position d'un élément sans affecter le flux du document. Elles incluent la rotation, la mise à l'échelle, la translation et l'inclinaison.

Les transformations sont très performantes car elles sont gérées par le GPU du navigateur. Elles sont souvent combinées avec les transitions pour créer des animations fluides et efficaces.

Fonctions de transformation principales

Translation (translate)

Déplace un élément sur les axes X et Y sans affecter les autres éléments :

.element:hover {
    transform: translateX(50px);        /* Déplacement horizontal */
    transform: translateY(-30px);       /* Déplacement vertical */
    transform: translate(50px, -30px);  /* Déplacement sur X et Y */
}

.element {
    transition: all 1s ease; /* Transition pour animer la transformation */
}

Rotation (rotate)

Fait pivoter un élément autour de son point d'origine :

.element:hover {
    transform: rotate(45deg);     /* Rotation de 45 degrés dans le sens horaire */
    transform: rotate(-90deg);    /* Rotation de 90 degrés dans le sens anti-horaire */
}
.element {
    transition: all 0.5s ease; /* Transition pour animer la transformation */
}

Mise à l'échelle (scale)

Agrandit ou réduit la taille d'un élément :

.element:hover {
    transform: scale(1.5);        /* Agrandit de 150% */
    transform: scale(0.8);        /* Réduit à 80% */
    transform: scaleX(2);         /* Agrandit uniquement sur l'axe X */
    transform: scaleY(0.5);       /* Réduit uniquement sur l'axe Y */
    transform: scale(1.2, 0.8);   /* Différentes valeurs pour X et Y */
}

.element {
    transition: all 0.5s ease; /* Transition pour animer la transformation */
}

Combinaison de transformations

Plusieurs transformations peuvent être appliquées simultanément :

$transition-duration: 0.3s;
.carte {
    transition: transform $transition-duration ease;
    
    &:hover {
        transform: translateY(-10px) scale(1.05) rotate(2deg);
    }
}

.carte {
    transition: transform 0.3s ease;
}

.carte:hover {
    /* L'ordre des transformations est important ! */
    transform: translateY(-10px) scale(1.05) rotate(2deg);
}

Explication :

Ici, l'élément .carte se déplace vers le haut de 10px, s'agrandit de 5% et effectue une légère rotation de 2 degrés lorsqu'on le survole. Le tout dans cet ordre précis, avec une transition fluide de 0.3 secondes.

Important : on applique généralement une transition transition sur l'élément, et une transformation transform sur le :hover de l'élément, et ce pour animer les transformations et éviter un changement instantané. Le rôle de transition est de gérer le TEMPS de la transformation, alors que transform gère le CHANGEMENT visuel en question.

Exercice pratique

Compléter l'exercice 2

---

3 : Les Animations avec Keyframes

Définition

Les animations CSS avec keyframes permettent de créer des animations complexes et automatiques qui ne dépendent pas d'interactions utilisateur. Contrairement aux transitions qui animent un changement entre 2 états, les keyframes définissent plusieurs étapes intermédiaires créant des séquences d'animation sophistiquées.

Les animations keyframes sont idéales pour créer des effets de chargement, des bannières animées, des illustrations interactives ou tout mouvement complexe qui doit se répéter ou s'exécuter automatiquement.

Syntaxe des keyframes

Les animations sont définies en deux parties :

1. La déclaration des keyframes (les étapes de l'animation)
2. L'application de l'animation en question sur l'élément HTML ciblé

/* 1. Définition de l'animation */
@keyframes nom-animation {
    0% {
        /* État initial */
        transform: translateX(0);
        opacity: 0;
    }
    
    50% {
        /* État à mi-parcours */
        transform: translateX(100px);
        opacity: 1;
    }
    
    100% {
        /* État final */
        transform: translateX(200px);
        opacity: 0;
    }
}

/* Alternative avec from/to */
@keyframes glissement {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(300px);
    }
}

/* 2. Application de l'animation */
.element {
    animation-name: nom-animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

/* Syntaxe raccourcie (recommandée) */
.element {
    animation: nom-animation 2s ease-in-out 0.5s infinite alternate forwards;
    /* name duration timing delay iteration direction fill-mode */
}

Explication :

• @keyframes nom-animation : Définit une animation nommée nom-animation avec des étapes à 0%, 50% et 100%. Dans ce cas-ci, il y aura 3 étapes :au départ (0%), à mi-parcours (50%) et à la fin (100%).
• .element : Applique l'animation à l'élément avec diverses propriétés pour contrôler son comportement, dont la plus important, animation-duration qui définit la durée totale de l'animation (par exemple, 2 secondes).
• La syntaxe raccourcie animation: ... est recommandée pour plus de concision.
  • Mais il est aussi possible d'utiliser les propriétés individuelles pour plus de clarté. Les propriétés minimales à définir pour réaliser une animation type sont animation-name et animation-duration.

Schéma de cette animation CSS avec keyframes :

Keyframe	Pourcentage d'avancement	Propriétés
État initial	0% (départ)	transform: translateX(0); opacity: 0;
Étape intermédiaire	50% (mi-parcours)	transform: translateX(100px); opacity: 1;
État final	100% (fin)	transform: translateX(200px); opacity: 0;

Propriétés d'animation

Propriété	Valeurs possibles	Description
animation-name	nom de l'animation	Référence les @keyframes à utiliser
animation-duration	temps (s ou ms)	Durée totale de l'animation
animation-timing-function	ease, linear, etc.	Courbe d'accélération
animation-delay	temps (s ou ms)	Délai avant le démarrage
animation-iteration-count	nombre ou infinite	Nombre de répétitions
animation-direction	normal, reverse, alternate, alternate-reverse	Direction de lecture
animation-fill-mode	none, forwards, backwards, both	État avant/après l'animation
animation-play-state	running, paused	Contrôle lecture/pause

Exemples pratiques

Animation d'un bouton qui pulse :

HTML
<button class="bouton-alerte">Alerte</button>

CSS
/* Animation de pulsation */
@keyframes pulse {
    0%{
        transform: scale(1); /* Départ à l'échelle normale */
    }
    50% {
        transform: scale(1.1); /* Agrandissement à 110% */
    }
    100% {
        transform: scale(1); /* Retour à l'échelle normale */
    }
}

.bouton-alerte {
    animation: pulse 1s ease-in-out infinite;
}

Animation d'une balle qui rebondit :

HTML
<div class="balle">🏀</div>

/* Animation de rebond */
@keyframes rebond {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px);
    }
}

.balle {
    animation: rebond 0.6s ease-in-out infinite;
}

Fill-mode expliqué

La propriété animation-fill-mode détermine l'état de l'élément avant et après l'animation :

/* none : état normal avant et après */
.element {
    animation: glissement 2s none;
}

/* forwards : conserve le dernier état (100%) après l'animation */
.element {
    animation: glissement 2s forwards;
}

/* backwards : applique le premier état (0%) pendant le délai */
.element {
    animation: glissement 2s 1s backwards;
}

/* both : applique backwards et forwards */
.element {
    animation: glissement 2s 1s both;
}

Points importants

• Les keyframes peuvent définir autant d'étapes intermédiaires que nécessaire (0%, 25%, 50%, 75%, 100%)
• La durée de l'animation est cruciale pour que le tout fonctionne. Elle est définie avec animation-duration dans les propriétés de l'élément.
• L'utilisation de forwards permet de maintenir l'état final après l'animation (donc d'éviter que l'élément ne revienne à son état initial)
• Pour faire une animation en boucle : utiliser infinite avec animation-iteration-count
• Pour faire l'animation qu'une seule fois, et arrêter sur l'état final : utiliser forwards avec animation-fill-mode

Exercice pratique

Compléter l'exercice 3

---

Démonstration complète (HTML et SCSS)

Démo 1 : Transition CSS simple

Objectif

Cette démonstration permet de montrer le principe de base d'une transition CSS : un changement fluide entre deux états d'un élément au survol.

Structure du projet VS Code :

RACINE/
├── index.html
└── css/
    └── styles.scss

index.html

Voir le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Simple - Démo Module 3</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>Démonstration de transition CSS</h1>
    
    <h2>Exemple simple (changement de couleur)</h2>
    <div class="element">
        Survolez-moi !
    </div>

    <h2>Autre exemple (changement de taille ET de couleur)</h2>
    <div class="element2">
        Survolez-moi  !
    </div>

    <h3>Autre exemple (changement de plusieurs choses à la fois)</h3>
    <div class="element3">
        Survolez-moi aussi !
    </div>
</body>
</html>

styles.scss

Voir le code

body {
    font-family: Arial, sans-serif;
    padding: 50px;
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 50px;
}


/* Étape 1 : État initial de l'élément 1 */
.element {
    background-color: #3498db;
    color: white;
    padding: 20px 40px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    
    /* Transition sur la couleur de fond */
    transition: background-color 0.3s ease;

    /* Étape 2 : État final de l'élément 1 (au survol), en imbrication SCSS */
    &:hover {
        /* Changement de couleur au survol */
        background-color: #2980b9;
    }
}


/* Étape 1 : État initial de l'élément 2 */
.element2 {
    width: 200px;
    background-color: #e74c3c;
    margin-top: 30px;
    padding: 25px;
    display: inline-block;

    /* Transition sur la taille et la couleur */
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;

    /* Étape 2 : État final de l'élément 2 (au survol), en imbrication SCSS */
    &:hover {
        /* Changement de taille */
        width: 300px;
        height: 100px;
        /* Changement de couleur */
        background-color: #c0392b;
    }
}


/* Étape 1 : État initial de l'élément 3 */
.element3
{
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    margin-top: 30px;
    padding: 25px;
    display: inline-block;

    /* Transition sur tous les éléments  (all) */
    /* Ceci permet d'inclure toutes les propriétés modifiées dans la transition */
    transition: all 0.5s ease;

    /* Étape 2 : État final de l'élément 3 (au survol), en imbrication SCSS */
    &:hover {
        /* Transformation : rotation de 45 degrés */
        transform: rotate(45deg);
        /* Changement de couleur */
        background-color: #8e44ad;
        /* Changement de taille */
        width: 150px;
        /* Changement d'opacité */
        opacity: 0.5;
    }
}

Conclusion

Cette démonstration montre les transitions CSS de base :

• Un premier élément qui change de couleur au survol.
  • La propiété transition cible uniquement background-color.
• Un deuxième élément qui change de taille et de couleur au survol.
  • La propriété transition cible width, height et background-color.
• Un troisième élément qui combine plusieurs changements (rotation, couleur, taille, opacité) au survol.
  • La propriété transition utilise all pour inclure toutes les propriétés modifiées. Ceci évite d'avoir à lister chaque propriété individuellement.

---

Démo 2 : Animations simples avec keyframes

Objectif

Cette démonstration présente deux animations simples : une transformation de forme avec changement de couleur, et un effet de fondu sur une image au survol.

Sans SCSS cette fois-ci, mais le principe reste le même !

Structure du projet VS Code :

RACINE/
├── index.html
└── css/styles.css

index.html

Voir le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animations de Chargement - Démo Module 3</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1>Indicateurs de Chargement CSS</h1>
        
        <div class="loaders-grid">
            <!-- Exemple 1 : Transformation de forme -->
            <div class="loader-card">
                <h3>Transformation de Forme</h3>
                <div class="shape"></div>
            </div>
            
            <!-- Exemple 2 : Fondu d'image -->
            <div class="loader-card">
                <h3>Fondu d'Image</h3>
                <img src="https://via.placeholder.com/200x200" alt="Image exemple" class="fade-image">
            </div>

        </div>
    </div>
</body>
</html>

styles.css

Voir le code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    min-height: 100vh;
    padding: 40px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: white;
    margin-bottom: 50px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.loaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
}

.loader-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.loader-card h3 {
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 1.2rem;
}

/* EXEMPLE 1 : Transformation de forme */
.shape {
    width: 100px;
    height: 100px;
    background: red;
    animation: morph 2s infinite;
}

@keyframes morph {
    0%{
        border-radius: 0;
        background: red;
    }
    50% {
        border-radius: 50%;
        background: blue;
    }
    100% {
        border-radius: 0;
        background: red;
    }
}

/* EXEMPLE 2 : Fondu d'image */
.fade-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.fade-image:hover {
    animation: fadeinout 3s;
}

@keyframes fadeinout {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Conclusion

Cette démonstration présente deux exemples d'animations simples :

• Transformation de forme : Changement de forme (carré à cercle) avec changement de couleur
• Fondu d'image : Effet de fade in/fade out sur survol en 3 secondes

---

Exercices pratiques

Exercice 1 : Menu de navigation avec transitions (Facile)

Avant de commencer

Assurez-vous de créer un dossier pour cet exercice avec les fichiers index.html et css/styles.scss ET avoir activé l'extension Live Sass Compiler dans VS Code pour compiler le SCSS en CSS automatiquement.

Énoncé

Créez un menu de navigation horizontal avec des effets de transition au survol. Chaque lien doit avoir un effet visuel fluide lorsque l'utilisateur passe sa souris dessus.

Utiliser TRANSITION pour cet exercice.

Fichiers à créer

• index.html
• css/styles.scss

Consignes

1. Créer une barre de navigation avec 5 liens (Accueil, À propos, Services, Portfolio, Contact)
2. Au survol, agrandir la taille du texte de 20% en 0.5 secondes et mettre le texte en gras

Exemple de structure HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Navigation</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <nav class="navbar">
        <ul class="nav-menu">
            <li><a href="#" class="nav-link">Accueil</a></li>
            <!-- Ajoutez les autres liens -->
        </ul>
    </nav>
</body>
</html>

---

Exercice 2 : Barre de navigation d'icônes (Intermédiaire)

Énoncé

Créez une barre de navigation d'icônes similaire à la barre des tâches de Windows ou Mac. Au survol d'une icône, celle-ci s'agrandit de 15% et effectue une rotation de 30 degrés, le tout en 1 seconde.

Utiliser TRANSFORM et TRANSITION pour cet exercice.

Fichiers à créer

• index.html
• css/styles.scss

Consignes

1. Télécharger 3-4 images d'icônes (par exemple, icônes d'applications comme Chrome, VS Code, etc.)
2. Créer une barre de navigation horizontale avec les icônes
3. Au survol d'une icône, appliquer un agrandissement de 15% et une rotation de 30 degrés
4. Utiliser une transition fluide de 1 seconde pour tous les effets

Exemple de structure attendue

<nav class="taskbar">
    <ul class="taskbar-icons">
        <li><a href="#" class="icon-link"><img src="icone1.png" alt="Icône 1"></a></li>
        <!-- Répéter pour les autres icônes -->
    </ul>
</nav>

Attention

La balise <a> est par défaut inline. Si vous choisissez de transformer cette balise et non l'image, il faudra donc lui appliquer display: inline-block ou block pour que les transformations fonctionnent correctement. Sans cela, les transformations risquent de ne pas s'appliquer comme prévu.

Par contre, si vous choisissez de transformer l'image directement, pas besoin de modifier son display.

---

Exercice 3 : Animation avec keyframes au survol (Intermédiaire)

Énoncé

Créez une div qui change de couleur de fond au survol en utilisant les keyframes. Au survol, la couleur passe de bleu à rouge, puis à vert, et revient à bleu. Lorsque la couleur atteint le vert, la bordure devient 10px, puis revient à normal à la fin de l'animation.

Fichiers à créer

• index.html
• css/styles.scss

Consignes

1. Créer une div avec une couleur de fond initiale bleue
2. Au survol, déclencher une animation keyframes qui change la couleur : bleu -> rouge -> vert -> bleu
3. Lorsque la couleur est verte (à 50% de l'animation), la bordure passe à 10px
4. La bordure revient à normal à la fin
5. Utiliser une durée d'animation de 2 secondes

Structure attendue

<div class="animated-div">Survolez-moi</div>

---

Correction

Correction Exercice 1

Voir le code complet

Solution HTML

(extrait HTML pertinent)
    <nav class="navbar">
        <ul class="nav-menu">
            <li><a href="#" class="nav-link">Accueil</a></li>
            <li><a href="#" class="nav-link">À propos</a></li>
            <li><a href="#" class="nav-link">Services</a></li>
            <li><a href="#" class="nav-link">Portfolio</a></li>
            <li><a href="#" class="nav-link">Contact</a></li>
        </ul>
    </nav>

Solution CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f5f7fa;
}

/* Barre de navigation simple */
.navbar {
    background: #34495e;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Menu de navigation */
.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

/* Liens de navigation */
.nav-link {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 10px 20px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease; /* Transition qui supporte toutes les propriétés */
}

.nav-link:hover {
    font-size: 1.32rem; /* Agrandissement d'environ 20% */
    font-weight: bold; /* Texte en gras */
}

/* Contenu principal */
main {
    max-width: 800px;
    margin: 100px auto;
    text-align: center;
    padding: 40px;
}

main h1 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

main p {
    color: #7f8c8d;
    font-size: 1.2rem;
    line-height: 1.6;
}

Explications

Cette solution démontre l'utilisation des transitions CSS pour animer les propriétés de texte au survol :

Agrandissement du texte : La taille du texte passe de 1.1rem à 1.32rem (augmentation d'environ 20%) avec une transition de 0.5 secondes.

Changement de poids : Le texte devient gras (font-weight: bold) au survol, également avec une transition fluide.

Transitions multiples : Deux propriétés (font-size et font-weight) sont animées simultanément pour créer un effet cohérent.

---

Correction Exercice 2

Solution complète

Voir le code complet

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barre de navigation d'icônes - Exercice 2</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1>Barre des tâches simulée</h1>
        
        <nav class="taskbar">
            <ul class="taskbar-icons">
                <li><a href="#" class="icon-link"><img src="https://placehold.co/64x64/FF0000/FFFFFF?text=Chrome" alt="Chrome"></a></li>
                <li><a href="#" class="icon-link"><img src="https://placehold.co/64x64/0000FF/FFFFFF?text=VSCode" alt="VS Code"></a></li>
                <li><a href="#" class="icon-link"><img src="https://placehold.co/64x64/00FF00/FFFFFF?text=Slack" alt="Slack"></a></li>
                <li><a href="#" class="icon-link"><img src="https://placehold.co/64x64/FFFF00/000000?text=Spotify" alt="Spotify"></a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

SCSS

// Variables SCSS pour une meilleure organisation
$primary-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$background-color: #f0f0f0;
$text-color: #333;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: $primary-font;
    background: $background-color;
    padding: 40px 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

h1 {
    color: $text-color;
    margin-bottom: 50px;
    font-size: 2.5rem;
}

/* Barre des tâches */
.taskbar {
    background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: inline-block;
    
    /* Liste des icônes */
    .taskbar-icons {
        list-style: none;
        display: flex;
        gap: 15px;
        margin: 0;
        padding: 0;
        
        /* Liens des icônes */
        .icon-link {
            display: block;
            transition: transform 1s ease; /* Transition de 1 seconde pour les transformations */
            
            img {
                width: 64px;
                height: 64px;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            }
            
            /* Transformations au survol */
            &:hover {
                transform: scale(1.15) rotate(30deg); /* Agrandissement de 15% et rotation de 30 degrés */
            }
        }
    }
}

Points de discussion

• Combinaison de transformations : L'utilisation de scale(1.15) rotate(30deg) crée un effet dynamique similaire aux barres des tâches modernes
• Similitude avec les OS : L'effet rappelle l'interaction des icônes dans les barres des tâches de Windows ou Mac

---

Correction Exercice 3

Voir le code complet

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Keyframes - Exercice 3</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1>Animation avec Keyframes</h1>
        <div class="animated-div">Survolez-moi</div>
    </div>
</body>
</html>

SCSS

$primary-blue: #007bff;
$primary-red: #dc3545;
$primary-green: #28a745;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 50px;
    font-size: 2.5rem;
}

.animated-div {
    width: 300px;
    height: 150px;
    background-color: $primary-blue;
    border: 2px solid #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
        animation: color-cycle 2s ease-in-out;
    }
}

@keyframes color-cycle {
    0% {
        background-color: $primary-blue;
        border-width: 2px;
    }
    25% {
        background-color: $primary-red;
        border-width: 2px;
    }
    50% {
        background-color: $primary-green;
        border-width: 10px;
    }
    75% {
        background-color: $primary-blue;
        border-width: 2px;
    }
    100% {
        background-color: $primary-blue;
        border-width: 2px;
    }
}

Points techniques

• Variables SCSS : Utilisation de variables pour les couleurs principales
• Keyframes personnalisés : Animation color-cycle avec 5 étapes (0%, 25%, 50%, 75%, 100%)
• Changement de bordure : La bordure passe de 2px à 10px à 50% de l'animation
• Transition fluide : Durée de 2 secondes avec easing ease-in-out
• Pseudo-classe :hover : Déclenchement de l'animation au survol

---

Vérification des connaissances

Question 1

Quelle est la principale différence entre une transition CSS et une animation avec keyframes ?

Réponse

Une transition anime un changement entre deux états déclenché par une interaction (comme :hover), tandis qu'une animation keyframes définit une séquence d'étapes qui peut s'exécuter automatiquement sans interaction utilisateur. Les transitions sont plus simples pour des effets basiques, les keyframes permettent des animations complexes avec plusieurs étapes intermédiaires.

/* Transition : changement au survol */
.element {
    transition: transform 0.3s ease;
}
.element:hover {
    transform: scale(1.2);
}

/* Animation keyframes : séquence automatique */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.element {
    animation: pulse 2s infinite;
}

Question 2

Comment utiliser translateX() et translateY() pour déplacer un élément horizontalement et verticalement ?

Réponse

translateX(valeur) déplace l'élément horizontalement (positif vers la droite, négatif vers la gauche), tandis que translateY(valeur) le déplace verticalement (positif vers le bas, négatif vers le haut). On peut les combiner avec translate(x, y).

/* Déplacement horizontal de 50px vers la droite */
.element:hover {
    transform: translateX(50px);
}

/* Déplacement vertical de 30px vers le haut */
.element:hover {
    transform: translateY(-30px);
}

/* Déplacement combiné */
.element:hover {
    transform: translate(50px, -30px);
}

Question 3

Comment l'ordre des fonctions de transformation dans transform affecte-t-il le résultat visuel ?

Réponse

L'ordre des transformations est crucial car elles s'appliquent séquentiellement. Par exemple, rotate(45deg) translateX(100px) tournera d'abord l'élément puis le déplacera, tandis que translateX(100px) rotate(45deg) le déplacera d'abord puis le tournera autour de son nouveau point.

.element:hover {
    /* Tourne d'abord, puis translate */
    transform: rotate(45deg) translateX(100px);
}

/* VS */

.element:hover {
    /* Translate d'abord, puis tourne */
    transform: translateX(100px) rotate(45deg);
}

Question 4

À quoi sert la propriété animation-iteration-count et quelles sont ses valeurs principales ?

Réponse

animation-iteration-count définit le nombre de fois qu'une animation keyframes doit se répéter. La valeur infinite fait tourner l'animation en boucle indéfiniment, tandis qu'un nombre (comme 3) limite les répétitions.

/* Animation qui se répète 3 fois */
.element {
    animation: slide 1s 3 ease-in-out;
}

/* Animation infinie */
.element {
    animation: pulse 2s infinite ease-in-out;
}

Question 5

Quelles sont les trois propriétés principales à définir pour créer une transition CSS de base ?

Réponse

Pour une transition de base, il faut définir : transition-property (la propriété à animer), transition-duration (la durée) et transition-timing-function (la fonction de temporisation). Elles peuvent être combinées dans la propriété raccourcie transition.

/* Approche détaillée */
.element {
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Approche raccourcie (recommandée) */
.element {
    transition: background-color 0.3s ease;
}

Question 6

Comment faire tourner un élément de 90 degrés dans le sens horaire en utilisant transform: rotate() ?

Réponse

Utilisez transform: rotate(90deg) pour tourner l'élément de 90 degrés dans le sens horaire. Pour le sens anti-horaire, utilisez une valeur négative comme rotate(-90deg). La rotation s'effectue autour du point d'origine de l'élément.

/* Rotation de 90 degrés horaire */
.element:hover {
    transform: rotate(90deg);
}

/* Rotation de 45 degrés anti-horaire */
.element:hover {
    transform: rotate(-45deg);
}

Question 7

Quelle est la différence entre utiliser from et to dans une déclaration @keyframes et utiliser des pourcentages comme 0% et 100% ?

Réponse

from équivaut à 0% (état initial) et to équivaut à 100% (état final). Les pourcentages permettent de définir des étapes intermédiaires comme 50%. Les deux syntaxes sont équivalentes mais les pourcentages offrent plus de contrôle.

/* Avec from/to */
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

/* Avec pourcentages */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

Question 8

Quelle est la différence entre transform: scale(1.5) et width: 150% pour agrandir un élément ?

Réponse

scale() transforme l'élément sans changer sa boîte de layout, gardant l'espace original. width: 150% modifie réellement la taille de la boîte, pouvant affecter le positionnement des éléments voisins.

/* Garde l'espace original */
.element {
    transform: scale(1.5);
}

/* Change la taille réelle */
.element {
    width: 150%;
}

Question 9

Comment mettre en pause une animation keyframes en cours d'exécution ?

Réponse

La propriété animation-play-state permet de contrôler la lecture. La valeur paused arrête l'animation à son état actuel, tandis que running la relance.

.element {
    animation: spin 2s infinite linear;
    animation-play-state: running; /* Par défaut */
}

.element:hover {
    animation-play-state: paused; /* Pause au survol */
}

Question 10

Comment appliquer une animation keyframes à un élément uniquement lorsqu'on passe la souris dessus ?

Réponse

Définissez l'animation dans le pseudo-sélecteur :hover de l'élément. L'animation ne se déclenchera que lorsque l'utilisateur survole l'élément avec la souris.

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.element:hover {
    animation: bounce 0.6s ease-in-out;
}