Softonic

Générateur d'animation CSS

Étape 1 / 2
Préréglage
Suivant

Écrire @keyframes à la main est fastidieux : on choisit des pourcentages, on devine les propriétés, on recharge, on observe, on ajuste. Ce générateur vous propose six animations toutes prêtes (fondu, glissement vers le haut, rebond, rotation, pulsation et secousse) et vous laisse définir le nom, la durée, l’easing, le nombre d’itérations et la direction. Le résultat se joue en temps réel et, quand vous êtes satisfait, vous pouvez copier le bloc @keyframes généré et la propriété abrégée animation.

Comment créer une animation CSS

  1. 1

    Choisissez un modèle

    Choisissez l'une des six animations intégrées : fondu, glissement vers le haut, rebond, rotation, pulsation ou secousse.

  2. 2

    Nommez l'animation

    Donnez aux keyframes un identifiant CSS valide, par exemple `cardIn` ou `fadeIn`. Le même nom est utilisé dans l'abrégé `animation`.

  3. 3

    Définissez le timing et la répétition

    Durée en secondes, easing (ease, ease-in, ease-out, ease-in-out, linear ou spring), nombre d'itérations (1, 2, 3 ou infinite) et direction (normal, reverse, alternate ou alternate-reverse).

  4. 4

    Copiez le CSS

    La règle `@keyframes` générée et l'abrégé `animation:`, prêts à coller dans votre feuille de style.

Anatomie d’une animation

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Huit propriétés dans l’écriture abrégée : animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Choix de l’easing

Le générateur propose six fonctions d’easing :

Easing cubic-bezier() Sensation
linear n/a Vitesse constante
ease-in 0.42, 0, 1, 1 Départ lent, fin rapide
ease-out 0, 0, 0.58, 1 Départ rapide, fin lente
ease-in-out 0.42, 0, 0.58, 1 Lent-rapide-lent
ease (défaut) 0.25, 0.1, 0.25, 1 Défaut doux
spring 0.68, -0.55, 0.27, 1.55 Dépassement puis stabilisation

Animez les bonnes propriétés

Le navigateur peut animer n’importe quelle propriété, mais seules quelques-unes s’animent en douceur sur le GPU sans déclencher de mise en page ni de peinture :

Peu coûteuses (composition seule) : transform, opacity, filter.

Coûteuses (mise en page/peinture) : width, height, top, left, margin, padding, background-color.

Les animations à soixante images par seconde sur width et top sont possibles sur de petits éléments, mais elles s’effondrent sur mobile si vous en animez beaucoup à la fois. Pour les mouvements complexes, préférez toujours transform: translate(...) à top / left, et transform: scale(...) à une largeur ou une hauteur animée.

will-change : à utiliser avec parcimonie

Demander au navigateur de pré-allouer une couche de composition peut améliorer la fluidité :

.card { will-change: transform; }

Mais cela consomme de la mémoire. Appliquez-le juste avant le déclenchement de l’animation et retirez-le ensuite. Définir will-change: transform en permanence sur de nombreux éléments peut faire plus de mal que de bien.

Mouvement réduit

Certains utilisateurs sont sensibles au mouvement et définissent des préférences système :

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Respectez ce réglage. Proposez un changement d’état instantané ou un fondu très subtil en remplacement.

Questions fréquentes

CSS pour un mouvement simple, déclaratif et ponctuel. Web Animations API (element.animate()) pour un timing piloté par JavaScript, des keyframes dynamiques, la pause et le contrôle de la lecture. Les deux s’exécutent sur le compositeur ; aucun n’est intrinsèquement plus rapide.

Presque toujours parce que vous animez une propriété qui déclenche la mise en page (width, top, margin) au lieu de transform. Passez à translate() et scale() et les à-coups disparaissent généralement.

Oui, animation: a 1s, b 1s 1s, c 1s 2s; exécute trois animations en séquence grâce à des délais décalés. Ce générateur produit une seule animation, ajoutez donc vous-même les entrées supplémentaires dans l’abrégé. Pour une chorégraphie plus complexe, utilisez la Web Animations API ou une bibliothèque comme GSAP.

Il fait prendre à l’élément l’état from avant le début de l’animation (pendant le délai) et conserver l’état to après la fin. Sans both, l’élément revient à son style d’avant l’animation lorsqu’elle se termine. Le générateur garde l’abrégé minimal ; ajoutez le fill mode vous-même si vous en avez besoin.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.