Comment créer des animations CSS sans JavaScript

Les animations CSS : puissantes et performantes

CSS permet de créer des animations fluides sans écrire une ligne de JavaScript. Plus performantes (gérées par le GPU), elles sont idéales pour les transitions, effets de survol et animations d’apparition.

Transitions : le point de départ

Une transition anime le changement d’une propriété CSS :

/* La transition se déclenche au changement d'état (hover, focus, classe ajoutée...) */
.bouton {
    background: #667eea;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    
    /* transition: propriété durée courbe délai */
    transition: all 0.3s ease;
}

.bouton:hover {
    background: #5a6fd6;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Transition sur plusieurs propriétés spécifiques */
.carte {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

Les courbes d’animation (easing)

@keyframes : animations avancées

/* Définir l'animation */
@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* L'appliquer */
.element-anime {
    animation: apparition 0.6s ease-out forwards;
}

/* Animation avec étapes intermédiaires */
@keyframes rebond {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-20px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.icone-rebond {
    animation: rebond 1s ease infinite;
}

Animations pratiques prêtes à l’emploi

Effet de pulsation (bouton CTA)

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(102, 126, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

.btn-pulse {
    animation: pulse 2s infinite;
}

Spinner de chargement

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

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

Texte qui se tape (typewriter)

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

@keyframes blink {
    50% { border-color: transparent; }
}

.typewriter {
    font-family: monospace;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #667eea;
    width: fit-content;
    animation: 
        typing 3s steps(30) forwards,
        blink 0.7s step-end infinite;
}

Apparition en cascade

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

.carte { 
    animation: slideUp 0.5s ease-out forwards;
    opacity: 0; /* caché par défaut */
}

/* Décalage pour chaque carte */
.carte:nth-child(1) { animation-delay: 0.1s; }
.carte:nth-child(2) { animation-delay: 0.2s; }
.carte:nth-child(3) { animation-delay: 0.3s; }
.carte:nth-child(4) { animation-delay: 0.4s; }

Fond dégradé animé

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-anime {
    background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;
    color: white;
    padding: 100px 40px;
}

Propriétés d’animation

Exercice pratique