TL
Tool Lab
💰Faire un don
💰Faire un don

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

À propos de cet outil

Le Générateur d'Animations CSS crée des animations fluides en configurant des presets de keyframes, le timing, la durée, le délai et les itérations. Un aperçu en direct montre l'animation en action.

Les animations CSS utilisant transform et opacity sont performantes car elles sont composées sur le GPU et ne déclenchent pas de layout ni de repaint.

Comment utiliser

  1. Sélectionnez un type d'animation dans le menu déroulant.
  2. Définissez la durée (par ex. 0.5s, 2s).
  3. Choisissez une fonction de temporisation pour contrôler l'easing.
  4. Définissez optionnellement un délai avant le début de l'animation.
  5. Définissez le nombre d'itérations (un nombre ou infinite).
  6. Cliquez sur Rejouer pour prévisualiser, puis Copier pour exporter le CSS.

Cas d'utilisation

Les développeurs front-end utilisent des animations de fondu et de glissement pour améliorer la performance perçue. Les designers UI prototypent des micro-interactions comme les pulsations de boutons.

Questions fréquentes

  • Qu'est-ce que fill-mode: both ? — L'animation applique les styles de début avant de commencer et conserve les styles de fin après la fin. C'est le paramètre le plus utile.
  • Comment faire boucler une animation indéfiniment ? — Définissez le nombre d'itérations sur infinite.
  • Les animations CSS sont-elles meilleures que JavaScript ? — Pour les effets simples et déclaratifs, les animations CSS sont préférées. Pour le séquençage complexe, JavaScript offre plus de contrôle.