Aller au contenu principal

📚 Animations CSS

Les animations CSS permettent de créer des mouvements et des effets qui se déclenchent automatiquement, sans interaction de l'utilisateur. Contrairement aux transitions qui nécessitent un déclencheur (comme :hover), les animations démarrent toutes seules.

Syntaxe de base​

Créer une animation avec @keyframes​

Pour créer une animation, on définit d'abord les étapes de l'animation avec @keyframes.

@keyframes nom-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Appliquer l'animation​

Ensuite, on applique l'animation à un élément avec la propriété animation.

.element {
    animation: nom-animation 2s;
}
info

La syntaxe de base est: animation: nom durée;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Apparition en fondu</h2>
  <p>Utilisez l'icône pour recharger dans le coin inférieur droit afin de voir l'animation du début.</p>
  <div class="boite">Je m'affiche progressivement!</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Étapes avec pourcentages​

On peut définir plusieurs étapes avec des pourcentages pour des animations plus complexes.

@keyframes couleur-changeante {
    0% {
        background-color: #3498db;
    }
    50% {
        background-color: #e74c3c;
    }
    100% {
        background-color: #2ecc71;
    }
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Animation avec plusieurs étapes</h2>
  <p>Utilisez l'icône pour recharger dans le coin inférieur droit afin de voir l'animation du début.</p>
  <div class="boite-couleur">Ma couleur change!</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Répéter l'animation​

Pour répéter une animation, ajoutez le nombre de répétitions après la durée.

.element {
    animation: mon-animation 2s 3;        /* 3 fois */
    animation: mon-animation 2s infinite; /* Boucle infinie */
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Répétition des animations</h2>
  
  <div class="conteneur">
      <div class="boite une-fois">1 fois</div>
      <div class="boite infini">Infini ∞</div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Exemples d'animations courantes​

Rotation​

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

.element {
    animation: rotation 2s linear infinite;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Rotation continue</h2>
  <div class="emoji">🤪</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Pulsation​

@keyframes pulsation {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.element {
    animation: pulsation 1s ease-in-out infinite;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Effet de pulsation</h2>
  
  <div class="conteneur">
      <div class="coeur">❤️</div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Glissement​

@keyframes glisser {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

.element {
    animation: glisser 2s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Glissement</h2>
  <div class="boite">Je glisse →</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox