Générateur d'animation CSS
Générez du code CSS d'animation avec keyframes personnalisables, durée, direction et courbe de transition.
Exécuter l’outil
Ce générateur d'animation CSS produit le code nécessaire pour animer vos éléments HTML sans configuration complexe. L'outil construit une règle `@keyframes` associée à une déclaration d'animation prête à intégrer dans votre feuille de style. La structure repose sur deux étapes fixes : à 0 %, l'élément présente une opacité nulle et une translation verticale de 20 pixels vers le bas ; à 100 %, l'opacité atteint 1 et la translation revient à zéro. Vous pouvez personnaliser le nom de l'animation, la durée exprimée en secondes, la fonction de temporisation, la direction ainsi que le mode de remplissage. Si le champ du nom reste vide, la valeur de secours `myAnimation` est automatiquement appliquée. Par défaut, les paramètres utilisent une durée de 1 seconde avec la temporisation `ease`, une direction normale et aucun mode de remplissage. Le bloc de code généré combine la règle complète et la classe d'application correspondante pour un copier-coller rapide dans vos projets web.
Mode d’emploi
- Indiquez le nom souhaité pour l'animation ou laissez la valeur par défaut.
- Renseignez la durée désirée en secondes dans le champ dédié.
- Définissez la fonction d'accélération, la direction et le mode de remplissage selon vos besoins.
- Lancez la génération pour afficher le bloc de code CSS complet.
- Copiez les règles `@keyframes` et la propriété d'animation dans votre fichier CSS.
Exemples
- Animation d'apparition standard : nom « fadeIn », durée de 1,5 seconde, accélération « ease-out », direction « normal » et mode « forwards » pour conserver l'état final visible.
- Effet de fondu alterné : nom « pulseCard », durée de 0,8 seconde, temporisation « ease-in-out », direction « alternate » et mode « both » pour un mouvement continu fluide.
FAQ
Que se passe-t-il si le champ du nom d'animation est laissé vide ?
Lorsque le champ reste vide, l'outil applique automatiquement le nom par défaut « myAnimation » dans la règle générée.
Quelles étapes d'animation sont incluses dans le code produit ?
La séquence comprend deux points clés fixes : une étape initiale à 0 % avec une opacité à 0 et un décalage vertical de 20 px, puis une étape finale à 100 % avec une opacité à 1 et un décalage nul.
Comment intégrer le résultat dans une page web ?
Collez simplement la règle d'animation et les keyframes dans votre feuille de style CSS, puis appliquez le sélecteur à l'élément HTML ciblé.