Chaque développeur a copié un bloc de @keyframes d'une réponse Stack Overflow, l'a collé, rafraîchi et a trouvé l'élément parfaitement immobile Neuf fois sur dix la raison est ennuyeuse : le nom de l'animation dans le @keyframes la règle ne correspondait pas au nom dans le animation sténographie, ou la durée a été laissée à zéro, ou la classe n'a jamais atterri sur l'élément L'autre raison est que l'animation d'images clés est l'un de ces coins de CSS où vous ne pouvez pas juger le résultat en lisant le code Une séquence de pourcentages et de transformations ne vous dit rien sur si le mouvement semble lisse, vif ou mal de mer jusqu'à ce que vous le regardiez courir.
Une animation CSS est le navigateur' ; s mécanisme permettant de déplacer un élément à travers une séquence nommée de styles au fil du temps Contrairement à une transition, qui anime un seul changement et attend un déclencheur, une animation suit un @keyframes script avec autant d'étapes que vous le souhaitez, peut boucler pour toujours, et commence tout seul le moment où il est appliqué C'est ce qui alimente le chargement des spinners, des impulsions d'attention, des effets d'entrée, et chaque bit de mouvement ambiant qui fait qu'une interface se sent vivante Mais les deux moitiés, les images clés et la sténographie, doivent être exactement d'accord, et la sténographie emballe sept ou huit valeurs dans une ligne dans un ordre que la plupart des gens ne mémorisent jamais.
le Générateur d'animation CSS supprime les conjectures Vous choisissez un mouvement dans une bibliothèque de préréglages, ajustez la durée, l'assouplissement, le délai, le nombre d'itérations et la direction, et regardez-le jouer sur un élément d'aperçu en direct L'outil écrit les deux @keyframes règle et correspondance animation raccourci dans une boîte prête à copier, avec les noms déjà synchronisés, de sorte que le bloc que vous collez fonctionne la première fois.
tl;dr : Une animation CSS déplace un élément à travers un
@keyframesséquence dans le temps, et contrairement à une transition, il n'a besoin d'aucun déclencheur et peut boucler. Le@keyframesnom et leanimation-namedoit correspondre exactement, ce qui est la raison la plus courante pour laquelle une animation ne fait rien. Le raccourci porte le nom, la durée, la fonction de synchronisation, le délai, le nombre d'itérations, la direction et le mode de remplissage. Préférez animertransformetopacitypour un mouvement fluide et composé Ce générateur vous offre quatorze préréglages, un contrôle de lecture complet et un aperçu en direct, et émet à la fois les images clés et la sténographie ensemble Il fonctionne entièrement dans votre navigateur sans inscription.
Quel problème un générateur d'animation CSS résout-il ?
La chose gênante à propos de l'animation d'images clés est l'aller-retour Pour régler un rebond à la main, vous écrivez le @keyframes règle, écris le animation ligne, enregistrez le fichier, passez au navigateur, attendez le rechargement et regardez Si le rebond est trop agressif, vous en changez un translateY valorisez et refaites toute la boucle Parce que ce cycle est lent, la plupart des gens acceptent la première version qui n'a pas l'air cassée plutôt que la version qui semble correcte, et la différence entre ces deux-là est exactement le poli qui sépare une interface considérée d'un modèle.
Un générateur fait s'effondrer cette boucle en un seul clic Vous choisissez un préréglage, faites glisser le curseur de durée, et l'élément d'aperçu joue le mouvement devant vous immédiatement Commutez la fonction de synchronisation à partir de ease à une courbe plus bézier et le changement de sensation est instantané Réglez le nombre d'itérations à l'infini et les boucles d'animation pour que vous puissiez l'étudier Après quelques minutes de cela, vous construisez une intuition pour ce à quoi ressemble six cents millisecondes contre douze cents, ce qui est le sens dont vous avez besoin pour prendre de bonnes décisions de mouvement partout ailleurs.
Il y a un argument de correction aussi Vous ne pouvez pas produire un malformé animation valorisez en choisissant parmi les menus et les curseurs de glisser, et vous ne pouvez pas mal taper le nom de l'image clé, car l'outil lie la sténographie aux images clés qu'il a générées La sortie est toujours sûre à coller Cette fiabilité est la même raison pour laquelle je garde les constructeurs visuels CSS proches pour d'autres propriétés, le même instinct derrière atteindre pour le générateur gradient au lieu de compter les arrêts de couleur dans ma tête, ou le générateur d'ombres-boîtes au lieu de deviner les rayons de flou.
En quoi une animation CSS est-elle différente d'une transition CSS ?
Cela fait constamment trébucher les gens, donc cela vaut la peine d'être précis Une transition anime une seule propriété entre deux états et nécessite quelque chose à changer, un survol, un focus, une classe à bascule, avant qu'elle ne s'exécute Elle a une valeur de départ et une valeur de fin et rien entre les deux Une animation, par contraste, suit un @keyframes règle qui peut définir n'importe quel nombre d'étapes intermédiaires, de sorte que l'élément peut se déplacer à travers une chorégraphie entière plutôt qu'une ligne droite de A à B. Il n'attend pas non plus quoi que ce soit : l'appliquer et il joue.
La conséquence pratique est que vous atteignez une transition lorsque vous voulez lisser un changement d'état, et pour une animation lorsque vous voulez un mouvement qui est intrinsèque à l'élément Un bouton qui s'assombrit en vol stationnaire est une transition Une tournette qui tourne pour toujours, un badge qui pulse pour dessiner l'œil, ou une carte qui glisse vers le haut au fur et à mesure que la page se charge sont toutes des animations, parce que le mouvement se produit tout seul et se répète souvent Si vous décidez encore de celui dont un effet donné a besoin, la règle empirique est simple : si une action utilisateur le démarre et il va dans un sens, utilisez une transition ; s'il joue par lui-même, boucle ou comporte plus de deux étapes, utilisez une animation. Générateur de transition CSS est l'outil compagnon pour le premier cas, et les deux couvrent la plupart de la motion que vous écrirez jamais.
| Aspect | Transition | Animation |
|---|---|---|
| Déclencheur | Nécessite un changement d'état (débordement, focus, classe) | Commence tout seul lorsqu'il est appliqué |
| Étapes | Deux, un début et une fin | N'importe quel numéro, via @keyframes |
| Boucle | Non, s'exécute une fois par changement | Oui, avec iteration-count |
| Usage typique | Effets de survol et de focalisation | Filateurs, légumineuses, entrées |
Quel est l'ordre correct du raccourci d'animation ?
le animation la sténographie est dense Elle peut porter le nom de l'image clé, la durée, la fonction de synchronisation, le délai, le nombre d'itérations, la direction, le mode de remplissage et l'état de lecture, le tout sur une ligne, et l'ordre compte pour les deux valeurs de temps exactement comme il le fait pour les transitions Ce générateur écrit le nom d'abord, puis la durée et la fonction de synchronisation, puis le délai optionnel, puis le nombre d'itérations, la direction et le mode de remplissage, par exemple animation: fadeIn 0.6s ease 1 both. Écrire le nom en premier est légal car les noms d'images clés ne sont pas des mots-clés CSS, et il se lit plus clairement que d'enterrer le nom à la fin.
La seule règle qui attrape tout le monde est les deux valeurs de temps La durée et le retard sont les deux fois, et CSS les dit séparés uniquement par position : la première valeur de temps est la durée et la seconde est le retard Tout le reste dans la sténographie est un mot-clé ou un nombre sans unité, donc il ne peut pas être confondu avec un temps C'est pourquoi l'outil peut en toute sécurité laisser tomber le retard quand il est nul, parce qu'un sans unité 1 ou le mot infinite ce qui suit est sans aucun doute le nombre d'itérations, pas une seconde fois. Le générateur omet également toute valeur égale à sa valeur par défaut CSS, donc a normal direction ou a none fill-mode n'encombre jamais la sortie Le résultat est un raccourci qui lit la façon dont vous l'écririez à la main une fois que vous connaissez les règles.
Pourquoi mon animation CSS ne joue pas ?
C'est la falaise, et presque tout le monde s'en éloigne au moins une fois La seule cause la plus fréquente est un décalage entre les animation-name et le nom dans le @keyframes règle. Une faute de frappe, une différence de capitalisation ou un nom qui a été renommé à un endroit et non à l'autre laisse le navigateur sans règle d'image clé à laquelle se lier, donc il ne fait rien silencieusement Il n'y a pas d'erreur et pas d'avertissement ; l'élément se trouve simplement là Parce que ce générateur écrit les deux moitiés ensemble à partir du même nom, cette classe entière de bug disparaît, ce qui est une grande partie du point.
Les autres causes valent la peine d'être connues car elles apparaissent lorsque vous écrivez à la main des animations Une durée de zéro signifie que l'animation se termine instantanément et que vous ne la voyez jamais Un élément qui est display: none ne fait pas fonctionner ses animations du tout, donc un fondu entrant qui dépend de l'élément en cours de rendu ne se déclenchera pas Une propriété manquante ou mal orthographiée à l'intérieur d'une image clé est discrètement ignorée plutôt que signalée Et une animation avec animation-fill-mode: none« Par défaut, ramène l'élément à ses styles unanimes à l'instant où il se termine, ce qui peut donner l'impression qu'il n'a jamais fonctionné si le mouvement était subtil. En regardant l'animation dans un aperçu en direct, la plupart d'entre eux sont en secondes, ce qui est le cas pour construire un mouvement où vous pouvez le voir plutôt que dans un fichier que vous continuez à recharger. ».
Que fait l'animation-remplissage-mode ?
Le mode de remplissage est le paramètre que les gens comprennent en dernier et dont ils ont le plus besoin Il décide quels styles l'élément affiche en dehors de l'animation' ; s fenêtre active, à la fois avant qu'il ne démarre pendant n'importe quel délai et après la fin de la valeur par défaut, none« , signifie que l'élément ignore les première et dernière images clés lorsque l'animation n'est pas en cours d'exécution, donc il se situe dans ses styles normaux avant l'animation et y revient ensuite. Ce snap-back est la source d'une frustration très courante : vous animez un élément pour s'estomper, il s'estompe magnifiquement, puis il disparaît à nouveau au moment où l'animation se termine, car avec none la finale opacity: 1 keyframe est écarté une fois l'animation terminée.
Le correctif est animation-fill-mode: forwards(qui maintient la dernière image clé appliquée une fois l'animation terminée, de sorte que l'élément fondu reste visible. backwards applique la première image clé pendant tout délai avant le démarrage de l'animation, ce qui est utile lorsque vous avez un délai et que vous ne souhaitez pas que l'élément clignote dans son état par défaut en premier. both fait les deux à la fois et est le choix général le plus sûr pour les animations d'entrée, c'est pourquoi ce générateur par défaut les nouvelles animations both. Comprendre le mode de remplissage est la différence entre une entrée qui atterrit et une entrée qui se défait, et il est beaucoup plus facile à saisir en le basculant dans un aperçu et en regardant la fin changer qu'en lisant la spécification à froid.
Quand une boucle d'animation doit-elle être effectuée et comment puis-je la contrôler ?
Le nombre d'itérations décide du nombre de fois où l'animation s'exécute. Réglez-le sur un nombre entier positif et l'animation le répète plusieurs fois, puis s'arrête ; définissez-le sur infinite et ça boucle pour toujours Les animations en boucle sont le bon choix pour le mouvement ambiant et continu, un spinner qui montre que le travail se passe, une impulsion qui maintient un appel à l'action vivant, un flotteur subtil qui donne un peu de vie à une image de héros. Les animations one-shot, exécutées une fois, sont destinées aux entrées et aux sorties, où le mouvement a un début et une fin clairs et le répéter serait distrayant.
Les paires de directions avec itération comptent pour façonner le fonctionnement de chaque passe. La valeur par défaut normal lit chaque itération de la première image clé à la dernière. reverse joue chacun en arrière. alternate exécute le premier passage vers l'avant et le suivant vers l'arrière, en ping-pongant entre les points finaux, c'est ainsi que vous construisez une impulsion de va-et-vient fluide sans définir de retour dans les images clés. alternate-reverse commence en arrière et alterne à partir de là Le générateur expose les quatre pour que vous puissiez sentir la différence : une impulsion avec alternate inspire et respire naturellement, tandis que les mêmes images clés avec normal et un nombre pair d'étapes doivent coder le retour elles-mêmes Pour le mouvement de boucle, alternate produit presque toujours le résultat le plus organique avec moins de travail sur clé.
Quelles propriétés dois-je animer pour des performances fluides ?
Les propriétés que vous animez décident si le mouvement s'exécute à soixante images par seconde ou si le choix est le même que pour les transitions Préférez transform et opacity. Les deux peuvent être remis au compositeur et animés sans que le navigateur ne recalcule la mise en page, de sorte qu'ils restent fluides même sur un matériel modeste et sous charge C'est pourquoi une carte qui glisse vers le haut avec transform: translateY se sent sans effort tandis que la même carte animée avec top ou margin-top ça fait mal Chaque entrée préréglée dans ce générateur est construite sur transform et opacity Pour cette raison exactement.
Les propriétés pour éviter d'animer dans une séquence d'images clés sont celles qui déclenchent la mise en page : width, height, top, left, margin et padding. Changer l'un de ces éléments oblige le navigateur à recalculer la géométrie de l'élément et tout ce qui l'entoure sur chaque image, ce qui est coûteux et est la cause la plus courante d'animation branlante, aggravée lorsque l'animation boucle et paie ce coût en continu. Si vous souhaitez qu'un élément grandisse, a transform: scale est presque toujours moins cher que l'animation width et height« Et cela semble presque identique. L’argument plus large en faveur de l’assemblage d’un ensemble d’outils qui vous orientent vers le chemin bon marché est le suivant » Boîte à outils pour les développeurs Web la pièce et les habitudes de flux de travail qui font du mouvement une décision rapide plutôt que lente sont dans le Outils de productivité des développeurs guide.
Comment le générateur garde-t-il l'aperçu honnête ?
Chaque constructeur visuel risque que l'aperçu et le code exporté s'écartent jusqu'à ce que l'outil vous enseigne une valeur qui ne se reproduira pas Ce générateur injecte l'exact @keyframes règle qu'il sort dans la page et applique l'exact animation raccourci il vous montre à l'élément d'aperçu, donc le mouvement que vous regardez est le mouvement que votre CSS copié produira Il n'y a pas de chemin d'animation séparé qui pourrait être en désaccord, et le nom de l'image clé dans l'aperçu est le nom dans la sortie.
Parce qu'une animation s'exécute sur le support puis se termine, l'aperçu a besoin d'un moyen de le rejouer, que l'outil gère en remontant l'élément d'aperçu lorsque vous appuyez sur rejouer. Cela reflète le comportement d'une animation one-shot en production, où elle se joue lorsque l'élément apparaît, puis maintient son état final selon le mode de remplissage. La sortie reste minimale également, supprimant le délai zéro et toute valeur par défaut afin que vous ne copiiez que les déclarations significatives, la même discipline consistant à émettre rien de redondant qui traverse le Générateur de filtres CSS et les autres constructeurs visuels Lorsque vous associez une animation d'images clés à une mise en page qui positionne l'élément, le flexbox générateur est un compagnon naturel pour construire la structure environnante.
Quels navigateurs prennent en charge les animations CSS ?
Les animations CSS sont prises en charge dans tous les navigateurs actuels et ce depuis plus d'une décennie. Le @keyframes règle, le animation la sténographie et toutes ses longhandes sont universelles et non préfixées, donc la sortie de ce générateur fonctionne dans Chrome, Firefox, Safari et Edge sans préfixes de fournisseur ni fallbacks La référence définitive est la spécification CSS Animations Level 1 du W3 C, qui est la source principale pour la façon dont chaque partie de la sténographie se comporte, et il vaut la peine d'être lu une fois que le générateur vous a donné une idée physique de ce que font les pièces Pour l'accessibilité, rappelez-vous que certains utilisateurs définissent un prefers-reduced-motion préférence, et c'est une bonne pratique d'envelopper une animation en boucle non essentielle dans une requête multimédia qui la respecte, afin que le mouvement ambiant puisse être désactivé pour les personnes qui le trouvent inconfortable.
Si vous assemblez un ensemble plus large d'outils visuels CSS, le générateur de transition et le Générateur de transformée CSS asseyez-vous naturellement à côté de celui-ci, puisque les transformations sont la matière première. La plupart de ces animations se déplacent et les transitions gèrent les changements d'état. Les animations ne le font pas. Tout ici s'exécute côté client, et le CSS que vous copiez est à vous d'utiliser sans runtime, sans étape de construction et sans dépendance.
Questions fréquentes
Qu'est-ce qu'un générateur d'animation CSS ?
Un générateur d'animation CSS est un outil visuel qui construit une animation d'image clé à partir des paramètres que vous choisissez Vous choisissez un préréglage, définissez la durée, l'assouplissement, le délai, le nombre d'itérations et la direction, et il génère le @keyframes règle et le animation sténographie accompagnée d'un aperçu en direct que vous pouvez rejouer.
Quelle est la différence entre une animation CSS et une transition CSS ?
Une transition anime un seul changement entre deux états et nécessite un déclencheur tel que le survol pour s'exécuter Une animation suit a @keyframes séquence avec un nombre quelconque d'étapes, peut boucler, et démarre tout seul dès qu'il est appliqué, sans attendre un changement d'état.
Quel ordre utilise le raccourci d'animation ?
Cet outil écrit le nom de l'image clé en premier, puis la durée, la fonction de synchronisation, le délai, le nombre d'itérations, la direction et le mode de remplissage, par exemple l'animation : fadeIn 0.6 s facilite 1 les deux La première valeur temporelle est toujours la durée et la seconde est le délai, donc une seule valeur temporelle est lue comme la durée.
Comment puis-je faire une boucle d'animation CSS pour toujours ?
Définissez le nombre d'itérations sur infini Dans le raccourci qui est le mot infini, comme dans l'animation : spin 1 s linéaire infini. Tout nombre entier positif répète plutôt l'animation plusieurs fois puis s'arrête selon le mode de remplissage et la direction.
Pourquoi mon animation CSS ne joue pas ?
La cause la plus fréquente est une inadéquation entre le nom d'animation et le nom @keyframes, y compris une faute de frappe ou une différence de casse, ce qui laisse le navigateur sans règle à laquelle se lier Vérifiez également que la durée est supérieure à zéro et que l'élément est rendu, puisqu'une animation sur un écran : aucun élément ne s'exécute.
Que fait la propriété animation-fill-mode ?
Le mode de remplissage décide des styles affichés par l'élément avant le début et après la fin de l'animation. La valeur par défaut ne ramène l'élément à ses styles normaux à la fin de l'animation. La mise en avant conserve l'image clé finale, l'arrière applique la première image clé pendant un délai et les deux font les deux.
Quelles propriétés dois-je animer pour des performances fluides ?
Préférez la transformation et l'opacité Le navigateur peut les animer sur le compositeur sans recalculer la mise en page, de sorte qu'ils restent lisses à 60 ips. L'animation de la largeur, de la hauteur, du haut, de la gauche ou de la marge force un recalcul de mise en page sur chaque image, ce qui est la raison habituelle pour laquelle une animation bégaie.
L'animation générée CSS est-elle gratuite et sûre à utiliser ?
Oui. L'outil est entièrement gratuit sans limites d'inscription ou d'utilisation, et il émet un CSS standard non préfixé pris en charge dans chaque navigateur moderne. Tous les traitements ont lieu dans votre navigateur, donc rien n'est téléchargé et l'outil fonctionne hors ligne une fois chargé.
