TP 2 : Animations CSS avec @keyframes

Objectifs du TP (2h)

1. Comprendre la différence entre transitions et animations
2. Maîtriser la règle @keyframes pour créer des animations multi-étapes
3. Utiliser les propriétés animation-* pour contrôler le comportement
4. Créer des animations complexes, en boucle et avec des effets avancés

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

Partie 1 : Cours — Les Animations CSS

Transition vs Animation : quelle différence ?

En résumé :

• Transition = animation simple entre A et B, déclenchée par l’utilisateur
• Animation = séquence complexe, peut démarrer seule et se répéter

La règle @keyframes

La règle @keyframes permet de définir les étapes d’une animation :

@keyframes nomDeLAnimation {
    0% {
        /* État initial */
    }
    50% {
        /* État intermédiaire */
    }
    100% {
        /* État final */
    }
}

On peut aussi utiliser from et to pour les cas simples :

@keyframes fondu {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Appliquer une animation

Pour appliquer une animation à un élément, utilisez la propriété animation :

.element {
    animation: nomDeLAnimation 2s ease infinite;
}

Toutes les sous-propriétés :

Exemple 1 : Animation de fondu (fade-in)

Code CSS

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

Code HTML

<div class="fade-in">
    <h2>Bienvenue !</h2>
    <p>Ce contenu apparaît en fondu</p>
</div>

Rendu visuel

Exemple 2 : Animation en boucle infinie

Code CSS

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

.bouton-pulse {
    background: #3498db;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    
    animation: pulse 2s ease infinite;
}

Code HTML

<button class="bouton-pulse">Cliquez-moi !</button>

Rendu visuel

Exemple 3 : Animation multi-étapes (bounce)

Code CSS

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.bounce {
    display: inline-block;
    animation: bounce 1s ease infinite;
}

Code HTML

<span class="bounce">⬇️</span>
<p>Scrollez vers le bas</p>

Rendu visuel

Exemple 4 : Rotation continue

Code CSS

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    
    animation: spin 1s linear infinite;
}

Code HTML

<div class="loader"></div>

Rendu visuel

Exemple 5 : Animation avec animation-direction

La propriété animation-direction contrôle le sens de lecture :

Code CSS

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);
    }
}

.slide-alternate {
    width: 50px;
    height: 50px;
    background: #e74c3c;
    border-radius: 8px;
    
    animation: slide 1s ease-in-out infinite alternate;
}

Rendu visuel — Mode alternate

Exemple 6 : animation-fill-mode

Cette propriété définit l’état de l’élément avant et après l’animation :

Code CSS

@keyframes apparition {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sans forwards : l'élément disparaît après l'animation */
.sans-forwards {
    animation: apparition 1s ease;
}

/* Avec forwards : l'élément reste visible */
.avec-forwards {
    animation: apparition 1s ease forwards;
}

Important : Utilisez forwards pour que l’élément garde son état final !

Exemple 7 : Animation au survol (combiné avec hover)

Code CSS

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-on-hover {
    display: inline-block;
    padding: 10px 20px;
    background: #9b59b6;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

.shake-on-hover:hover {
    animation: shake 0.5s ease;
}

Code HTML

<button class="shake-on-hover">Erreur ! 🚫</button>

Rendu visuel

Exemple 8 : Animation de texte — Effet machine à écrire

Code CSS

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #333;
    }
}

.typewriter {
    overflow: hidden;
    border-right: 3px solid #333;
    white-space: nowrap;
    font-family: monospace;
    font-size: 1.5rem;
    
    animation: 
        typing 3s steps(30, end) forwards,
        blink-caret 0.75s step-end infinite;
}

Code HTML

<p class="typewriter">Bienvenue sur mon portfolio...</p>

Rendu visuel

Exemple 9 : Animations multiples sur un élément

On peut appliquer plusieurs animations séparées par des virgules :

Code CSS

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

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
    50% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.8); }
}

.floating-card {
    padding: 20px;
    background: white;
    border-radius: 12px;
    
    animation: 
        float 3s ease-in-out infinite,
        glow 2s ease-in-out infinite;
}

Rendu visuel

Contrôler l’animation avec JavaScript (bonus)

Vous pouvez mettre en pause ou relancer une animation via CSS et JavaScript :

.paused {
    animation-play-state: paused;
}

const element = document.querySelector('.animated');

// Mettre en pause
element.classList.add('paused');

// Reprendre
element.classList.remove('paused');

Partie 2 : Exercices notés (1h)

Exercice 1 : Loader personnalisé (5 points)

Créez une page loader.html avec 3 loaders différents :

1. Loader spinner : Un cercle qui tourne (comme l’exemple du cours)
2. Loader points : 3 points qui rebondissent avec un délai décalé
3. Loader barre : Une barre de progression qui se remplit en boucle

Code HTML suggéré pour le loader points :

<div class="loader-dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
</div>

Astuce : Utilisez animation-delay pour décaler les animations des points.

Critères d’évaluation :

• Les 3 loaders fonctionnent (3 points)
• Animations fluides et bien paramétrées (1 point)
• Créativité et design (1 point)

Exercice 2 : Page d’accueil animée (7 points)

Créez une page accueil.html avec une hero section animée contenant :

1. Un titre principal qui apparaît avec un effet de fade-in depuis le bas
2. Un sous-titre qui apparaît après le titre (avec un délai)
3. Un bouton CTA (Call To Action) qui pulse pour attirer l’attention
4. Une flèche qui indique de scroller, avec une animation de rebond

Structure suggérée :

<section class="hero">
    <h1 class="titre-anime">Bienvenue sur mon site</h1>
    <p class="sous-titre-anime">Découvrez mes projets et compétences</p>
    <button class="cta-pulse">Voir plus</button>
    <div class="scroll-indicator">
        <span class="fleche-bounce">↓</span>
    </div>
</section>

Critères d’évaluation :

• Animation du titre (1.5 points)
• Animation du sous-titre avec délai (1.5 points)
• Bouton qui pulse (1.5 points)
• Flèche qui rebondit (1.5 points)
• Cohérence visuelle et timing (1 point)

Exercice 3 : Menu de navigation animé (8 points)

Créez une page menu.html avec un menu de navigation qui comporte :

1. 5 liens disposés horizontalement
2. Au survol de chaque lien :
   • Une barre colorée qui apparaît en dessous (de gauche à droite)
   • Un léger effet de scale sur le texte
3. Au chargement de la page, les liens apparaissent un par un avec un effet cascade (décalage de 0.1s entre chaque)
4. Bonus : Ajoutez un hamburger menu animé (3 barres qui se transforment en X au clic)

Structure suggérée :

<nav class="main-nav">
    <a href="#" class="nav-link">Accueil</a>
    <a href="#" class="nav-link">À propos</a>
    <a href="#" class="nav-link">Services</a>
    <a href="#" class="nav-link">Portfolio</a>
    <a href="#" class="nav-link">Contact</a>
</nav>

Astuce pour la barre au survol : Utilisez un pseudo-élément ::after avec transform: scaleX(0) par défaut, et scaleX(1) au hover.

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #3498db;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

Critères d’évaluation :

• Structure HTML correcte (1 point)
• Animation d’apparition cascade (2 points)
• Effet de survol avec barre (2 points)
• Animation de scale au survol (1 point)
• Hamburger menu animé - bonus (2 points)

Barème récapitulatif

Ressources utiles

• MDN — Utiliser les animations CSS
• Animista — Bibliothèque d’animations CSS prêtes à l’emploi
• CSS Tricks — A Guide to CSS Animation
• Keyframes.app — Outil visuel pour créer des keyframes

À retenir

1. @keyframes définit les étapes d’une animation avec des pourcentages
2. animation applique l’animation à un élément (nom, durée, timing, répétition…)
3. animation-iteration-count: infinite pour boucler indéfiniment
4. animation-direction: alternate pour des allers-retours
5. animation-fill-mode: forwards pour garder l’état final
6. Combinez plusieurs animations avec des virgules
7. Les animations peuvent démarrer automatiquement, contrairement aux transitions
8. Utilisez animation-delay pour créer des effets de cascade