Générateur d'Animation CSS
CSS Animation Generator est un outil en ligne gratuit qui vous aide à créer des animations CSS fluides et accrocheuses sans écrire d'images clés manuellement. Choisissez parmi des effets d'animation prédéfinis tels que fondu, diapositive, rebond, rotation, retournement, zoom, etc. Personnalisez la durée, le délai, la fonction de minutage, le nombre d'itérations, la direction et le mode de remplissage à l'aide de commandes intuitives. Prévisualisez votre animation en temps réel sur un élément en direct, puis copiez le code CSS généré, y compris les @images clés et tous les préfixes du fournisseur. Parfait pour les développeurs et les concepteurs qui souhaitent ajouter du mouvement à leurs sites Web sans connaissances approfondies en animation CSS.
Ce Qui Est
Les animations CSS vous permettent de créer des transitions fluides et des effets de mouvement complexes sur des éléments Web uniquement via CSS—aucun JavaScript requis (pour les animations de base). Le système d'animation CSS repose sur deux concepts fondamentaux: les transitions (changements simples d'état à état) et les images clés (séquences d'animation en plusieurs étapes). Le raccourci de la propriété d'animation CSS comprend: - animation-name: Le nom de la règle @keyframes - animation-durée: Combien de temps dure un cycle (par exemple, 1s, 500ms) - animation-delay: Temps d'attente avant le début de l'animation - animation-timing-fonction: La courbe de vitesse (facilité, linéaire, facilité d'entrée, facilité de sortie, facilité d'entrée, bézier cubique) - animation-itération-nombre: Combien de fois répéter (nombre ou infini) - animation-direction: normale, inverse, alternée, alternée-inverse - animation-fill-mode: Quels styles s'appliquent avant / après (aucun, en avant, en arrière, les deux) -animation-lecture-état: en cours d'exécution ou en pause La règle @keyframes définit les étapes d'animation: "'css @ images clés fadeIn { à partir de { opacité: 0;} à { opacité: 1;} } ``` Les catégories d'animation prédéfinies incluent: - Animations de fondu: Fondu enchaîné, fondu enchaîné, fondu enchaîné, Fondu enchaîné à gauche, Fondu enchaîné à droite, Fondu enchaîné - Animations de diapositives: slideInUp, slideInDown, slideInLeft, slideInRight - Animations de rebond: Rebondissant, rebondissant, rebondIsSant, rebondissant - Rotation des animations: Rotation dans, Rotation vers le bas, Rotation vers le haut, Rotation vers l'extérieur - Animations de zoom: Zoom arrière, Zoom arrière, Zoom arrière, Zoom arrière - Animations spéciales: charnière, roulement, déploiement, flash, pouls, secousse, balançoire, tada Fonctions de chronométrage expliquées: - facilité: Démarrage lent, milieu rapide, fin lente (par défaut) - linéaire: Vitesse constante tout au long - facilité d'entrée: Démarrage lent, accélération - facilité: Démarrage rapide, décélération - facilité d'entrée et de sortie: Démarrage et fin lents, milieu rapide - cube-bézier (x1, y1, x2, y2): Courbe de synchronisation personnalisée Le générateur génère un CSS propre et multi-navigateurs avec tous les préfixes de fournisseur nécessaires (- webkit -, - moz -, - o -) et une solution de secours pour les navigateurs plus anciens.
Comment utiliser
- Sélectionnez un effet d'animation dans la galerie. Parcourez les catégories telles que Fondu, Diapositive, Rebond, Rotation, Zoom et Effets spéciaux. Cliquez sur une vignette d'animation pour la prévisualiser sur l'élément de démonstration.
- Ajustez la durée de l'animation à l'aide du curseur ou du champ de saisie. Les valeurs typiques vont de 200 ms (rétroaction rapide) à 2-3 secondes (effets dramatiques). Des durées plus courtes sont plus rapides pour les interactions avec l'interface utilisateur.
- Définissez un délai si vous souhaitez que l'animation démarre après une pause. Utile pour séquencer plusieurs animations (par exemple, fondu dans l'en-tête après 500 ms, puis glisser dans le contenu après 800 ms).
- Choisissez une fonction de chronométrage dans la liste déroulante. Essayez "facilité de sortie" pour les animations d'entrée (arrivée rapide, arrêt progressif) et "facilité d'entrée" pour les animations de sortie. Utilisez 'linear'} pour les rotations continues. Créez des courbes cubiques de bézier personnalisées à l'aide de l'éditeur de courbes.
- Configurez le nombre d'itérations (combien de fois l'animation est lue) et la direction (normale, inverse, alternée pour les effets de va-et-vient). Définissez "infini" pour les animations continues comme le chargement des filateurs.
- Prévisualisez l'animation en temps réel en cliquant sur le bouton "Lecture". L'élément de démonstration exécute votre animation configurée. Cliquez sur "Pause" pour figer à l'état actuel ou sur "Rejouer" pour redémarrer.
- Copiez le code CSS généré à partir du panneau de sortie. Le code inclut la définition @keyframes, la sténographie de l'animation et les propriétés individuelles de la main longue. Collez-le dans votre feuille de style ou utilisez des styles en ligne.
Exemples
Entrée: Type: Fondu entrant, Durée: 1s, Assouplissement: facilité d'entrée-sortie
Processus: Keyframes 0%:opacity=0, 100%:opacity=1 → CSS output
Résultat: @ images clés Fondu {0% {opacité: 0} 100% {opacité = 1} }
Entrée: Type: Diapositive De gauche à droite, Durée: 500ms
Processus: Traduire (-100%) à Traduire (0)
Résultat: @ images clés slideLeft { 0% {transformation: traduire (-100%)} 100% {transformation: Traduire (0)} }
Recherches Connexes
Les gens recherchent aussi : générateur d'animation css, images clés css, animation css, générateur d'animation.
générateur d'animation cssimages clés cssanimation cssgénérateur d'animation
Questions Fréquemment Posées
Quelle est la différence entre les animations CSS et les transitions CSS?
Les transitions CSS s'animent entre deux états (par exemple, le changement d'état du survol) et nécessitent un déclencheur comme: survol ou changements de classe. Les animations CSS utilisent @keyframes pour définir plusieurs états intermédiaires et peuvent s'exécuter automatiquement au chargement de la page, boucler à l'infini ou jouer en sens inverse. Utilisez des transitions pour des effets de survol/clic simples et des animations pour des mouvements complexes, en plusieurs étapes ou à lecture automatique. Les deux peuvent être combinés: utilisez des transitions pour les états de survol et des animations pour les effets d'entrée.
Comment déclencher une animation au chargement de la page?
Ajoutez simplement la propriété animation au CSS de l'élément. Il sera lu automatiquement lorsque l'élément sera rendu:. my-element { animation: fadeIn 1s ease-out;}. Si vous souhaitez que l'animation soit mise en pause initialement et déclenchée plus tard via JavaScript, définissez animation-play-state: paused par défaut et passez à l'exécution lorsque cela est nécessaire (par exemple, lors du défilement dans la vue, lors de l'interaction de l'utilisateur ou sur une minuterie).
Puis-je combiner plusieurs animations sur un seul élément?
Oui. Appliquez plusieurs animations à l'aide d'une liste séparée par des virgules: animation: Fondu en 1s, glissement en 1s; Chaque animation peut avoir sa propre durée, délai et fonction de minutage. Cela permet des effets combinés complexes comme la décoloration tout en glissant simultanément vers le haut. Soyez attentif aux performances—trop d'animations simultanées peuvent provoquer des problèmes sur les appareils mobiles.
Pourquoi mon animation n'est-elle pas fluide? Ça a l'air bizarre.
Pour des animations fluides à 60 ips, animez uniquement les propriétés qui peuvent être accélérées par GPU: transformation (translation, mise à l'échelle, rotation, inclinaison) et opacité. Évitez d'animer la largeur, la hauteur, le haut, la gauche, la marge ou le remplissage—ceux-ci déclenchent un recalcul de la mise en page (redistribution) qui coûte cher. Si vous voyez jank, ajoutez will-change: transform; à l'élément animé pour indiquer au navigateur de l'optimiser. Réduisez également le nombre d'éléments animés à l'écran simultanément.
Les animations CSS sont-elles accessibles ?
Certains utilisateurs sont sensibles au mouvement et préfèrent une animation réduite. Respectez cela en vérifiant la requête média prefers-reduced-motion: @media (prefers-reduced-motion: reduce) {*{animation: aucune !important;}}. Les utilisateurs souffrant de troubles vestibulaires peuvent ressentir de l'inconfort à cause des effets de parallaxe, du zoom ou des animations de rotation. Fournissez toujours un moyen de désactiver ou de minimiser les animations et évitez de lire automatiquement de longues animations sans contrôle de l'utilisateur.