# Générateur d'Animation CSS

Génère des images clés et des propriétés d'animation CSS

> Page canonique: https://elysiatools.com/fr/tools/animation-generator

- **Catégorie:** Design

- **Mots-clés:** css, animation, images clés, transformation, générateur, style

## Présentation

Le Générateur d'Animation CSS est un outil intuitif permettant de créer rapidement des animations fluides pour vos projets web en générant automatiquement les images clés (keyframes) et les propriétés CSS nécessaires.

## Entrées

- **Nom de l'Animation** (text): myAnimation
- **Type d'Animation** (select)
- **Durée (s)** (number): Animation duration
- **Fonction de Timing** (select)
- **Délai (s)** (number): Animation delay
- **Nombre d'Itérations** (select)
- **Direction** (select)
- **Mode de Remplissage** (select)

## Quand l'utiliser

- Pour ajouter des interactions visuelles dynamiques à vos éléments d'interface utilisateur.
- Lorsque vous souhaitez créer des effets de transition complexes sans écrire manuellement le code CSS.
- Pour standardiser les animations sur plusieurs composants d'un site web.

## Fonctionnement

- Sélectionnez le type d'animation souhaité parmi les options disponibles (fondu, glissement, rotation, etc.).
- Ajustez les paramètres tels que la durée, le délai, la fonction de timing et le nombre d'itérations.
- Configurez la direction et le mode de remplissage pour définir le comportement final de l'animation.
- Copiez le code CSS généré et intégrez-le directement dans votre feuille de style.

## Cas d'usage

- Création d'effets d'apparition fluide pour les éléments de page au chargement.
- Conception d'animations de survol (hover) pour les boutons et les cartes interactives.
- Mise en place de loaders ou d'indicateurs de chargement personnalisés.

## Questions fréquentes

### Quels types d'animations sont supportés ?

L'outil supporte les animations de fondu, glissement, mise à l'échelle, rotation et rebond.

### Puis-je définir une animation infinie ?

Oui, vous pouvez sélectionner l'option 'infinite' dans le paramètre 'Nombre d'Itérations'.

### Le code généré est-il compatible avec tous les navigateurs ?

Oui, le code utilise les propriétés standard CSS3 supportées par tous les navigateurs modernes.

### Comment contrôler la vitesse de l'animation ?

Vous pouvez ajuster la 'Fonction de Timing' (ease, linear, etc.) et la 'Durée' en secondes.

### Puis-je ajouter un délai avant le début de l'animation ?

Oui, le champ 'Délai (s)' vous permet de définir une attente avant le déclenchement de l'animation.

## Outils associés

- [Générateur de Transformation CSS](https://elysiatools.com/fr/tools/transform-generator): Génère des propriétés de transformation CSS
- [Générateur de Filtre d'Arrière-plan CSS](https://elysiatools.com/fr/tools/backdrop-filter-generator): Génère des propriétés de filtre d'arrière-plan CSS pour les effets de verre givré
- [Générateur de Rayon de Bordure CSS](https://elysiatools.com/fr/tools/border-radius-generator): Génère des propriétés de rayon de bordure CSS
- [Générateur d'Ombre de Boîte CSS](https://elysiatools.com/fr/tools/box-shadow-generator): Génère des propriétés d'ombre de boîte CSS
- [Générateur de Chemin de Découpe CSS](https://elysiatools.com/fr/tools/clip-path-generator): Génère des propriétés de chemin de découpe CSS pour des formes personnalisées
- [Générateur de Filtres CSS](https://elysiatools.com/fr/tools/css-filter-generator): Génère des propriétés de filtre CSS
- [Générateur de dégradé de couleurs](https://elysiatools.com/fr/tools/color-gradient-generator): Génère des dégradés de couleurs fluides entre plusieurs couleurs avec des étapes et formats personnalisables
- [Outil de Couleurs Complémentaires Divisées](https://elysiatools.com/fr/tools/color-split-complement): Générer des schémas de couleurs complémentaires divisées avec un contraste harmonieux en utilisant une couleur de base et deux couleurs adjacentes à son complément

## Exemples

- [Echantillons CSS](https://elysiatools.com/fr/samples/css-viewer-samples): Fichiers d exemple pour la visionneuse CSS dans le navigateur
- [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format
- [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS
- [Exemples de Sélecteurs CSS](https://elysiatools.com/fr/samples/css-selectors): Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse