TP 1 : Transitions CSS — Animer en douceur

Objectifs du TP (2h)

Comprendre le fonctionnement des transitions CSS
Maîtriser les propriétés transition-property, transition-duration, transition-timing-function et transition-delay
Appliquer des transitions sur différents événements (hover, focus, etc.)
Créer des effets visuels fluides et professionnels

Organisation : 1h de cours avec démonstrations + 1h d’exercices notés en autonomie

Partie 1 : Cours — Les Transitions CSS

Qu’est-ce qu’une transition ?

Une transition CSS permet de passer progressivement d’un état à un autre, plutôt que de manière instantanée. C’est le moyen le plus simple d’ajouter des animations à votre site.

Sans transition : Le changement est brutal
Avec transition : Le changement est fluide et agréable

La propriété `transition`

La syntaxe complète de transition se compose de 4 sous-propriétés :

transition: [property] [duration] [timing-function] [delay];

Propriété	Description	Exemple
`transition-property`	La propriété CSS à animer	`background-color`, `transform`, `all`
`transition-duration`	Durée de l’animation	`0.3s`, `500ms`
`transition-timing-function`	Courbe d’accélération	`ease`, `linear`, `ease-in-out`
`transition-delay`	Délai avant le démarrage	`0s`, `0.2s`

Exemple 1 : Transition simple au survol

Code CSS

.bouton {
    background-color: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    
    /* La transition s'applique sur background-color */
    transition: background-color 0.3s ease;
}

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

Code HTML

<button class="bouton">Survolez-moi !</button>

Rendu visuel

Exemple 2 : Transitions multiples

On peut animer plusieurs propriétés en même temps :

Code CSS

.carte {
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* Plusieurs transitions séparées par des virgules */
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.carte:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

Code HTML

<div class="carte">
    <h3>Ma carte</h3>
    <p>Survolez pour voir l'effet d'élévation</p>
</div>

Rendu visuel

Ma carte

Survolez pour voir l'effet d'élévation

Les fonctions de timing (easing)

Le timing-function définit comment la transition progresse dans le temps :

Valeur	Description
`linear`	Vitesse constante du début à la fin
`ease`	Démarrage lent, accélération, fin lente (défaut)
`ease-in`	Démarrage lent
`ease-out`	Fin lente
`ease-in-out`	Démarrage et fin lents
`cubic-bezier(x1, y1, x2, y2)`	Courbe personnalisée

Code CSS — Comparaison des timings

.boite {
    width: 100px;
    height: 50px;
    background: #3498db;
    margin: 10px 0;
    transition: transform 1s; /* timing par défaut = ease */
}

.boite.linear { transition-timing-function: linear; }
.boite.ease-in { transition-timing-function: ease-in; }
.boite.ease-out { transition-timing-function: ease-out; }
.boite.ease-in-out { transition-timing-function: ease-in-out; }

.container:hover .boite {
    transform: translateX(200px);
}

Rendu visuel — Survolez le conteneur

Survolez ce conteneur pour voir les différences

linear

ease-in

ease-out

ease-in-out

Exemple 3 : Transition avec délai

Le transition-delay permet de retarder le début de l’animation :

Code CSS

.menu-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Chaque élément a un délai différent pour un effet de cascade */
.menu-item:nth-child(1) { transition-delay: 0s; }
.menu-item:nth-child(2) { transition-delay: 0.1s; }
.menu-item:nth-child(3) { transition-delay: 0.2s; }
.menu-item:nth-child(4) { transition-delay: 0.3s; }

.menu:hover .menu-item {
    opacity: 1;
    transform: translateX(0);
}

Code HTML

<nav class="menu">
    <a class="menu-item" href="#">Accueil</a>
    <a class="menu-item" href="#">À propos</a>
    <a class="menu-item" href="#">Services</a>
    <a class="menu-item" href="#">Contact</a>
</nav>

Rendu visuel

Survolez pour voir l'effet cascade

Exemple 4 : Transition sur le focus (formulaires)

Les transitions sont très utiles pour améliorer l’UX des formulaires :

Code CSS

.input-field {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
    
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.input-field:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.input-field:valid {
    border-color: #27ae60;
}

.input-field:invalid {
    border-color: #e74c3c;
}

Code HTML

<input type="email" class="input-field" placeholder="Entrez votre email" required>

Rendu visuel

Exemple 5 : Transform + Transition

La propriété transform combinée aux transitions permet des effets visuels puissants :

Code CSS

.image-container {
    overflow: hidden;
    border-radius: 12px;
}

.image-zoom {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.image-container:hover .image-zoom {
    transform: scale(1.1);
}

Code CSS — Rotation

.icon-rotate {
    display: inline-block;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.bouton:hover .icon-rotate {
    transform: rotate(180deg);
}

Rendu visuel — Effet zoom

Survolez-moi

Propriétés animables

Toutes les propriétés CSS ne sont pas animables !

✅ Animables :

opacity
transform (translate, rotate, scale, skew)
background-color, color
width, height, padding, margin
border-color, border-radius
box-shadow
top, left, right, bottom

❌ Non animables :

display
font-family
background-image (partiellement)
position

Astuce performance : Privilégiez transform et opacity qui sont optimisées par le GPU !

Raccourci `transition`

Vous pouvez tout écrire en une seule ligne :

/* Syntaxe longue */
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;

/* Syntaxe raccourcie équivalente */
transition: all 0.3s ease-in-out 0s;

/* Ou plus simplement */
transition: all 0.3s ease-in-out;

Partie 2 : Exercices notés (1h)

Exercice 1 : Boutons interactifs (5 points)

Créez une page boutons.html avec 3 boutons ayant chacun un effet de survol différent :

Bouton 1 : Changement de couleur de fond avec une transition douce
Bouton 2 : Effet d’agrandissement (scale) au survol
Bouton 3 : Effet combiné : changement de couleur + légère élévation (translateY + box-shadow)

Critères d’évaluation :

Structure HTML correcte (1 point)
Transitions fluides et bien paramétrées (2 points)
Variété des effets (1 point)
Code CSS propre et organisé (1 point)

Exercice 2 : Galerie d’images avec overlay (7 points)

Créez une galerie de 4 images disposées en grille (2x2). Chaque image doit avoir :

Un zoom léger au survol (scale)
Un overlay sombre qui apparaît progressivement au survol
Un texte centré (titre de l’image) qui apparaît avec l’overlay

Structure HTML suggérée :

<div class="galerie">
    <div class="image-card">
        <img src="image1.jpg" alt="Image 1">
        <div class="overlay">
            <h3>Titre Image 1</h3>
        </div>
    </div>
    <!-- Répéter pour les 3 autres images -->
</div>

Astuce : Utilisez position: relative sur .image-card et position: absolute sur .overlay. Jouez avec opacity pour faire apparaître l’overlay.

Critères d’évaluation :

Grille CSS fonctionnelle (2 points)
Effet de zoom sur l’image (1 point)
Overlay avec transition d’opacité (2 points)
Texte centré dans l’overlay (1 point)
Code propre et commenté (1 point)

Exercice 3 : Formulaire stylisé (8 points)

Créez un formulaire de contact avec les champs suivants :

Nom (input text)
Email (input email)
Message (textarea)
Bouton d’envoi

Exigences :

Chaque champ doit avoir une transition sur le border et le box-shadow au focus
Les labels doivent se déplacer au-dessus du champ au focus (effet “floating label”)
Le bouton doit avoir un effet de survol élaboré (couleur + légère transformation)
Ajoutez une validation visuelle : bordure verte si valide, rouge si invalide

Structure HTML suggérée :

<form class="contact-form">
    <div class="form-group">
        <input type="text" id="nom" required>
        <label for="nom">Votre nom</label>
    </div>
    <!-- Autres champs... -->
</form>

Critères d’évaluation :

Structure HTML sémantique (1 point)
Transitions sur les champs au focus (2 points)
Effet floating label (2 points)
Effet sur le bouton (1 point)
Validation visuelle (1 point)
Design général et cohérence (1 point)

Barème récapitulatif

Exercice	Points
Exercice 1 : Boutons interactifs	5
Exercice 2 : Galerie avec overlay	7
Exercice 3 : Formulaire stylisé	8
Total	20

Ressources utiles

MDN — Utiliser les transitions CSS
Cubic-bezier.com — Pour créer vos propres courbes d’animation
Easings.net — Visualiser les différentes fonctions de timing

À retenir

transition permet des animations simples entre deux états
Spécifiez la propriété, la durée, le timing et éventuellement un délai
Préférez animer transform et opacity pour de meilleures performances
Les transitions s’appliquent sur l’état initial, pas sur l’état :hover
Utilisez plusieurs transitions séparées par des virgules pour des effets complexes

TP 1 : Transitions CSS — Animer en douceur

Objectifs du TP (2h)

Partie 1 : Cours — Les Transitions CSS

Qu’est-ce qu’une transition ?

La propriété transition

Exemple 1 : Transition simple au survol

Code CSS

Code HTML

Rendu visuel

Exemple 2 : Transitions multiples

Code CSS

Code HTML

Rendu visuel

Ma carte

Les fonctions de timing (easing)

Code CSS — Comparaison des timings

Rendu visuel — Survolez le conteneur

Exemple 3 : Transition avec délai

Code CSS

Code HTML

Rendu visuel

Exemple 4 : Transition sur le focus (formulaires)

Code CSS

Code HTML

Rendu visuel

Exemple 5 : Transform + Transition

Code CSS

Code CSS — Rotation

Rendu visuel — Effet zoom

Propriétés animables

Raccourci transition

Partie 2 : Exercices notés (1h)

Exercice 1 : Boutons interactifs (5 points)

Exercice 2 : Galerie d’images avec overlay (7 points)

Exercice 3 : Formulaire stylisé (8 points)

Barème récapitulatif

Ressources utiles

À retenir

La propriété `transition`

Raccourci `transition`