Générateur d'animation CSS par frame
Guide
Générateur d'animation CSS par frame
Créez des animations CSS @keyframes visuellement avec une prévisualisation en temps réel. Choisissez parmi 10 préférentiels populaires comme bondissement, vibrations, pulsation, apparition, entrée, rotation, balancement, étirement, éclat et tremblement — ou concevez votre propre animation à clés depuis zéro. Ajustez la durée, l'éasing, le nombre d'itérations, la direction et le mode de remplissage, puis copiez le code CSS généré.
Comment utiliser
Sélectionnez un préférentiel d'animation ou commencez avec une animation personnalisée. Configurez les paramètres de l'animation — nom, durée, fonction d'éasing, nombre d'itérations, direction et mode de remplissage. Modifiez les arrêts de clé en définissant le pourcentage, la valeur de transformation CSS et l'opacité pour chaque arrêt. Ajoutez ou supprimez des arrêts de clé selon vos besoins. Assurez-vous que la prévisualisation en temps réel se met à jour en continu, puis copiez le code CSS généré.
Caractéristiques
- 10 Préférentiels d'animation – Bondissement, vibrations, pulsation, apparition, entrée, rotation, balancement, étirement, éclat et tremblement prêts à l'emploi
- Éditeur de clés personnalisé – Ajoutez, supprimez et modifiez les arrêts de clé avec des contrôles de pourcentage, de transformation et d'opacité
- Prévisualisation en temps réel de l'animation – Voir votre animation jouer sur un élément d'exemple en temps réel tout en effectuant des modifications
- Contrôle complet de l'animation – Configurez la durée, l'éasing (y compris un éasing personnalisé cubic-bezier), le nombre d'itérations, la direction et le mode de remplissage
- Sortie CSS propre – Génère à la fois la règle @keyframes et la propriété raccourcie d'animation prête à être collée dans votre feuille de style
FAQ
-
Qu'est-ce que les CSS @keyframes ?
Les CSS @keyframes définissent les étapes d'une séquence d'animation. Chaque clé spécifie les styles à un point donné pendant la durée de l'animation, exprimé en pourcentage allant de 0% (début) à 100% (fin). Le navigateur intercale les valeurs des propriétés entre les clés pour créer des transitions fluides.
-
Quelle est la différence entre les transitions CSS et les animations CSS ?
Les transitions CSS animent un changement de propriété entre deux états (par exemple, en cas de survol), déclenché par un changement d'état. Les animations CSS utilisant @keyframes peuvent s'exécuter automatiquement, boucler, avoir plusieurs étapes intermédiaires et offrir plus de contrôle grâce à des propriétés comme animation-direction, iteration-count et fill-mode.
-
Quelle est la fonction du mode de remplissage de l'animation ?
La propriété animation-fill-mode contrôle la manière dont les styles sont appliqués avant et après l'exécution de l'animation. « avant » conserve les styles de la dernière clé après la fin de l'animation. « arrière » applique les styles de la première clé pendant la période de retard. « les deux » applique les deux comportements. « aucun » rétablit les styles d'origine de l'élément.
-
Qu'est-ce qu'une fonction d'éasing cubique-bezier ?
Une fonction d'éasing cubique-bezier définit une courbe de vitesse personnalisée pour une animation en utilisant quatre points de contrôle (x1, y1, x2, y2). Elle détermine la vitesse ou la lenteur à laquelle l'animation progresse à différents points dans le temps. Les préférentiels courants comme ease, ease-in et ease-out sont des raccourcis nommés pour des valeurs spécifiques de cubic-bezier.
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
Outils essentiels
Tout voir Nouveautés
Tout voirMise à jour: Notre dernier outil a été ajouté le 12 mai 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
