Aller au contenu
TextArray1.87.0
Tout en local

Générateur d'animations CSS

Convertir les étapes pourcentage;propriété:valeur en un bloc @keyframes et son raccourci d'animation.

Entrée
Sortie
Outils connexes
Générateur de dégradé CSSOutils de développement
Générateur de box-shadow CSSOutils de développement
Générateur CSS gridOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur d'animations CSS
Collez les étapes de keyframe sous la forme pourcentage;propriété:valeur — une ligne par arrêt, comme 0;opacity:0 suivi de 100;opacity:1 — et cet outil assemble un bloc @keyframes complet plus la déclaration de raccourci d'animation correspondante. Ajoutez plusieurs paires propriété:valeur à la même ligne, séparées par des points-virgules, pour animer plus d'une propriété à cet arrêt, et réutilisez un pourcentage sur plusieurs lignes pour continuer à ajouter des propriétés à celui-ci.
Choisissez un preset — fade, glisser, pulse, shake ou bounce — pour sauter l'écriture manuelle des étapes et obtenir une animation prête avec toutes les options toujours ajustables, ou basculez le preset à personnalisé pour contrôler chaque arrêt à partir de votre propre entrée. Les options restantes façonnent le raccourci d'animation : le nom définit l'identifiant partagé par la règle @keyframes et la déclaration d'animation, la durée et le délai sont en secondes, et la fonction d'accélération couvre chaque mot-clé standard plus une courbe cubic-bezier() personnalisée pour une forme d'accélération exacte. Définissez l'animation pour qu'elle se répète un nombre fixe de fois ou activez infinite, choisissez une direction (normal, reverse, alternate, alternate-reverse) et un mode de remplissage pour ce qui se passe avant et après son exécution, et activez l'option de préfixe webkit pour également émettre un bloc @-webkit-keyframes et une ligne -webkit-animation pour les versions antérieures de Safari et Android WebView.
Les valeurs de pourcentage en dehors de 0–100 sont fixées à la plage, "from" et "to" sont acceptés comme alias pour 0 et 100, et les lignes vides ou mal formées sont ignorées plutôt que de briser la sortie. Le total sous la sortie rapporte combien d'arrêts keyframe ont été générés et le nombre exact de caractères.
Tout s'exécute localement dans votre navigateur au fur et à mesure que vous tapez — aucune donnée CSS ou animation n'est jamais envoyée à un serveur. Copiez le résultat, téléchargez-le en tant que fichier .txt, ou renvoyez la sortie à l'entrée pour continuer à affiner les étapes.
FAQ
À quoi ressemble vraiment le format d'entrée?
Une ligne par arrêt keyframe : un pourcentage, un point-virgule, puis propriété:valeur. Ajoutez plus de paires propriété:valeur sur la même ligne, chacune séparée par un point-virgule, pour animer plusieurs propriétés à la fois — par exemple 50;opacity:0.5;transform:scale(1.1).
Que se passe-t-il quand je choisis un preset comme fade ou bounce?
L'outil utilise un ensemble intégré d'étapes keyframe pour ce preset et ignore tout ce qui se trouve dans la boîte d'entrée, tandis que toutes les autres options — nom, durée, timing, direction et ainsi de suite — s'appliquent toujours. Basculez sur personnalisé pour utiliser de nouveau votre propre entrée.
Comment obtenir une courbe d'accélération personnalisée exacte?
Définissez la fonction d'accélération sur personnalisée et entrez quatre nombres séparés par des virgules dans le champ cubic-bezier, comme 0.25, 0.1, 0.25, 1. Une valeur invalide revient à ease plutôt que de produire un CSS cassé.
Quelle est la différence entre le nombre d'itérations et infinite?
Le nombre d'itérations définit le nombre de fois que l'animation est lue avant de s'arrêter. L'activation de infinite annule cela et répète l'animation indéfiniment.
Mes données d'animation sont-elles chargées quelque part?
Non. Le bloc @keyframes et le raccourci d'animation sont générés entièrement dans votre navigateur — rien de ce que vous tapez ne quitte jamais votre appareil.