La différence entre une interface qui semble bon marché et une interface qui semble prise en compte est généralement d'un cinquième de seconde. Un bouton qui s'accroche à sa couleur de vol stationnaire dès que votre pointeur le touche est aussi brusque ; le même bouton qui s'adapte à cette couleur sur deux cents millisecondes se lit comme terminé. Cet assouplissement est une transition CSS, et pour quelque chose de si petit, il est remarquable de voir que je l'ai vu mal fait, mis sur l'état de vol stationnaire au lieu de l'état de base, réglé par essais et erreurs sur une douzaine de rafraîchissements, ou appliqué à une propriété qui ne peut pas du tout animer.
Une transition est le navigateur' ; s façon d'animer le changement entre deux valeurs d'une propriété au fil du temps, plutôt que de changer instantanément C'est le cheval de bataille derrière les effets de vol stationnaire, les états de mise au point, les panneaux en expansion et les classes basculées, et c'est presque toujours le premier bit de mouvement que quiconque ajoute à un projet Mais la sténographie encadre quatre valeurs en une ligne dans un ordre fixe, la fonction de synchronisation est la partie qui détermine comment le mouvement se sent, et il y a une falaise bien connue des gens tombent quand ils essaient de faire disparaître quelque chose display: none. Construire la transition là où vous pouvez la voir jouer sauve tout cela.
le Générateur de transition CSS vous permet de choisir une propriété, de définir la durée et le délai en millisecondes et de choisir une fonction de synchronisation parmi les mots-clés CSS et un ensemble de courbes cubiques-bezier organisées. Vous pouvez empiler plusieurs transitions en un seul raccourci, et un bouton de déclenchement lit le mouvement sur un élément d'aperçu en direct afin que vous ressentiez l'assouplissement avant de vous y engager. La déclaration exacte se trouve dans une case prête à copier ci-dessous.
tl;dr : Une transition CSS anime le changement entre deux valeurs d'une propriété sur une durée définie Elle appartient à l'état de base, pas à l'état de vol stationnaire, donc l'élément se relâche dans les deux sens L'ordre de raccourci est propriété, durée, timing-fonction, retard Vous ne pouvez pas faire de transition
display: parce qu'il n'a pas de valeurs intermédiaires et que vous devriez préférer animertransformetopacitypour des performances fluides Ce générateur expose chaque partie avec un aperçu en direct, prend en charge plusieurs couches et émet un CSS propre. Il fonctionne entièrement dans votre navigateur sans inscription.
Quel problème un générateur de transition CSS résout-il ?
La partie difficile d’une transition n’est pas la syntaxe ; c'est qu'on ne peut pas juger la motion en la lisant. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) décrit une facilité de rebond spécifique, mais la seule façon de savoir si ce rebond semble bon pour votre bouton est de le regarder se produire Et le regarder se produire dans votre propre projet signifie écrire la règle, configurer l'état de vol stationnaire, enregistrer et déplacer votre souris sur l'élément, puis ajuster un nombre et tout refaire Cette boucle est suffisamment lente pour que la plupart des gens se contentent de la première chose qui fonctionne plutôt que de la chose qui semble la mieux.
Un générateur transforme cette boucle en un seul clic Vous définissez une durée et appuyez sur la gâchette, et l'élément de prévisualisation joue la transition devant vous Changez la fonction de synchronisation et appuyez à nouveau dessus, et vous sentez la différence entre une diapositive linéaire et une facilité de sortie se calmer immédiatement Après quelques tours, vous développez une sensation pour ce que deux cents millisecondes ressentent contre cinq cents, qui est l'intuition qui sépare le mouvement qui aide du mouvement qui se met en travers de votre façon, le CSS de travail est déjà écrit, donc il n'y a rien à transcrire.
Le même argument de fiabilité s'applique ici qu'avec n'importe quel constructeur visuel CSS : vous ne pouvez pas produire un mal formé transition valeur en faisant glisser des curseurs et en choisissant dans les menus, de sorte que la sortie est toujours sûre à coller C'est la raison pour laquelle je garde ce genre d'outil proche, le même instinct derrière atteindre pour le Générateur de transformée CSS quand j'ai besoin d'une transformation plutôt que de compter les degrés dans ma tête.
Où va la transition, sur l'état de base ou l'état de vol stationnaire ?
C'est l'erreur que je vois le plus, et cela vaut la peine d'être clairement indiqué car le correctif est si simple La transition appartient à l'élément' ; son état de base, pas à son état :hover règle. Lorsque la transition est déclarée sur l'état de base, le navigateur anime la propriété dans les deux sens : elle se glisse dans le changement de survol lorsque le pointeur arrive, et elle se détend lorsque le pointeur part. Cette symétrie est ce qui rend une interaction complète.
Mettez la transition uniquement sur :hover et vous obtenez un effet déséquilibré La propriété s'anime en douceur sur le chemin d'entrée, car la transition est présente pendant que l'élément est plané, mais au moment où le pointeur part, le :hover la règle ne s'applique plus, la transition va avec, et la propriété s'enclenche instantanément Le résultat est un bouton qui se détend gracieusement puis se reboucle, ce qui semble pire qu'aucune animation du tout Le générateur' ; s sortie est écrit pour aller sur l'état de base, et le guidage est cuit dans l'outil pour exactement cette raison Déclarez-le une fois, sur l'élément lui-même, et laissez les changements d'état le déclencher.
Quel est l'ordre correct de la sténographie de transition ?
le transition la sténographie regroupe jusqu'à quatre valeurs en une seule ligne, et l'ordre est fixé par la spécification : propriété, durée, fonction de synchronisation, délai. Donc transition: opacity 300ms ease-in-out 100ms signifie la propriété d'opacité, animée sur trois cents millisecondes, en utilisant une courbe de facilité d'entrée, après un délai de cent millisecondes Obtenez la commande erronée et le navigateur soit ignore la déclaration, soit la lit comme quelque chose que vous n'aviez pas l'intention.
La seule règle qui attrape les gens est les deux valeurs de temps La durée et le retard sont tous deux des temps, et CSS les distingue purement par position : la première valeur de temps est toujours la durée, et la seconde est toujours le retard Si vous n'écrivez qu'une seule valeur de temps, elle est lue comme la durée, et le retard reste à sa valeur par défaut de zéro C'est pourquoi une transition qui semble commencer trop tôt est souvent un cas de retard écrit accidentellement en premier Le générateur contourne tout le problème en construisant la sténographie pour vous dans le bon ordre, et il omet le retard entièrement quand il est nul, donc vous n'expédiez jamais un training 0ms ça ne fait rien Voici l'anatomie dans un tableau.
| Partie | exemple | Ce qu'il contrôle |
|---|---|---|
| propriété | opacity |
Quelle propriété anime, ou all pour chaque animable |
| durée | 300ms |
Combien de temps prend l'animation ; la première valeur temporelle |
| fonction temporelle | ease-in-out |
La courbe d'accélération du mouvement |
| retard | 100ms |
Combien de temps attendre avant de commencer ; la deuxième valeur temporelle |
Pourquoi mon affichage : aucune transition ne sera-t-elle pas animée ?
C'est la falaise, et presque tout le monde en sort au moins une fois Vous voulez qu'un élément s'efface, donc vous faites la transition display de none à block et ensemble opacity[TRADUCTION], et l'élément apparaît simplement sans fondu La raison est fondamentale : display n'est pas une propriété animable Il n'y a pas de point à mi-chemin entre none et block(traduction), aucune valeur à laquelle le navigateur peut interpoler à la barre des cinquante pour cent, donc il n'y a rien à interpoler Le changement se produit instantanément, et toute animation d'opacité que vous avez superposée est coupée parce que l'élément n'a pas été rendu au départ.
Le correctif classique est d'animer opacity et visibility ensemble et partez display hors de lui. visibility peut faire la transition car, bien qu'il s'agisse également d'une propriété discrète, l'associer à une durée permet au navigateur de maintenir l'élément visible jusqu'à ce que l'opacité se termine à la sortie. Le correctif moderne l'est transition-behavior: allow-discrete, une fonctionnalité plus récente qui vous permet d'animer des propriétés discrètes telles que display aux extrémités d’une transition, vous pouvez donc véritablement disparaître display: none dans les navigateurs qui le supportent De toute façon, la leçon est la même : vérifiez que la propriété que vous êtes en transition a des valeurs intermédiaires avant de passer une heure à vous demander pourquoi rien ne bouge C'est le genre de gotcha qu'un aperçu en direct fait surface en quelques secondes, ce qui est une grande partie de l'argument pour construire un mouvement où vous pouvez le regarder.
Qu'est-ce qu'une fonction de timing, et pourquoi est-ce si important ?
La fonction de synchronisation est la partie d'une transition qui décide comment le mouvement se sent, et elle fait beaucoup plus de travail que la durée Deux transitions de même longueur peuvent se sentir complètement différentes selon leur courbe A linear la transition se déplace à une vitesse constante et semble mécanique, comme une pièce de machine. Un ease-out la transition commence rapidement et ralentit à mesure qu'elle arrive, ce qui semble naturel car elle imite la façon dont les objets physiques décélérent, et c'est la bonne valeur par défaut pour la plupart des mouvements d'interface. ease-in fait le contraire et est le meilleur pour les choses qui quittent l'écran.
En dessous, toutes ces courbes sont des courbes à bézier cubique. Les mots-clés ease, ease-in, ease-out et ease-in-out ne sont que des noms amicaux pour des détails spécifiques cubic-bezier(x1, y1, x2, y2) valeurs, où les deux points de contrôle façonnent l'accélération Ce qui rend cubique-bezier puissant est qu'un point de contrôle avec un y la valeur supérieure à un ou inférieure à zéro pousse l'animation au-delà de son point final et vers l'arrière, c'est ainsi que vous construisez un dépassement ou un rebond. Le générateur comprend une courbe standard Material pour un mouvement d'interface propre et une courbe arrière qui dépasse pour une sensation élastique et ludique, plus un steps() fonction pour le mouvement qui saute dans des images discrètes plutôt que de glisser, c'est ainsi que vous animez un sprite ou un compteur à tic-tac Choisir une courbe et appuyer sur la gâchette est le moyen le plus rapide de créer une sensation pour ce que chacun fait.
Quand dois-je utiliser plusieurs couches de transition ?
Une seule transition anime une propriété, mais les interactions réelles en changent souvent plusieurs à la fois Un bouton qui se soulève en vol stationnaire peut changer sa couleur de fond, pousser sa transformation et approfondir son ombre, et chacun d'entre eux peut vouloir son propre timing. Le transition property gère cela avec une liste séparée par des virgules, où chaque entrée est une transition complète avec sa propre propriété, sa durée, sa fonction de synchronisation et son retard.
Le générateur prend directement en charge cela : ajoutez une couche pour chaque propriété, réglez chacune indépendamment et l'outil les joint en un seul raccourci transition: background-color 200ms ease, transform 200ms ease-out. La raison de donner des propriétés sépare les transitions plutôt que d'utiliser all est le contrôle et la performance. transition: all est pratique, mais il anime chaque propriété qui change, y compris celles que vous n'aviez pas l'intention, et il oblige le navigateur à tout regarder pour les changements Nommer les propriétés spécifiques est à la fois plus prévisible et moins cher Le préréglage de révélation lente dans l'outil montre une transition à deux couches, une opacité qui s'estompe et le déplacement d'une transformation avec un délai partagé, qui est la recette standard pour un élément qui se facilite à la vue Si le côté transformation de cet appariement est ce que vous réglez, le Générateur de transformée CSS est l'outil compagnon, et les deux sont presque toujours utilisés ensemble.
Quelles propriétés dois-je animer pour des performances fluides ?
Toutes les propriétés ne sont pas aussi bon marché à animer, et le choix a un effet direct sur le fait que votre transition se déroule à soixante images lisses par seconde ou bégaie Les deux propriétés à préférer sont transform et opacity. Les deux peuvent être remis au GPU et composés sans recalculer la mise en page, donc les animer reste fluide même sur du matériel modeste. C'est pourquoi une carte qui glisse avec transform: translateX se sent beurré tandis que la même carte est animée left se sent rude.
Les propriétés à éviter d'animer 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 position et la taille de l'élément et de tout ce qui est affecté par celui-ci, sur chaque image de l'animation, ce qui est coûteux et est la cause la plus fréquente de mouvement de débauche Si vous avez envie d'animer une largeur, il vaut généralement la peine de se demander si a transform: scaleX produirait un effet similaire à moindre coût Le générateur vous permet de choisir n'importe quelle propriété afin que vous ne soyez jamais bloqué, mais les propriétés qu'il répertorie sont mises transform et opacity près du sommet parce que ce sont ceux que vous devriez atteindre pour le premier Les arguments plus larges pour construire un ensemble d'outils considéré comme celui-ci est dans le Boîte à outils pour les développeurs Web pièce, et les habitudes de workflow derrière elle 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 est confronté au même risque : l'aperçu et le code exporté se séparent jusqu'à ce que l'outil vous enseigne une valeur qui ne se reproduira pas Ce générateur applique l'exact transition valorisez-le vers l'élément d'aperçu et déclenchez-le avec un changement d'état réel, donc le mouvement que vous voyez est le mouvement que le CSS copié produira Il n'y a pas de chemin d'animation séparé qui pourrait être en désaccord.
Parce qu'une transition ne s'exécute que lorsqu'une propriété change, l'aperçu a besoin d'un état entre lequel basculer, ce qui est ce que fait le bouton de déclenchement : il retourne l'élément entre deux ensembles de valeurs pour que la transition se déclenche et vous pouvez le regarder Cela reflète comment une transition fonctionne dans la nature, où un survol, un focus ou une classe basculée est ce qui le déclenche La sortie reste minimale aussi, laissant tomber le délai quand il est nul et ne répertoriant que les couches que vous avez ajoutées, la même discipline consistant à émettre que des déclarations significatives qui parcourt le générateur gradient et le générateur d'ombres-boîtes.
Quels navigateurs prennent en charge les transitions CSS ?
Les transitions CSS sont prises en charge dans tous les navigateurs actuels et ce depuis plus d'une décennie. Le transition la propriété et tous ses longs-mains sont universels et non préfixés, donc la sortie de ce générateur fonctionne dans Chrome, Firefox, Safari et Edge sans aucun préfixe de fournisseur ou fallbacks Le plus récent transition-behavior: allow-discrete capacité d'animation de propriétés discrètes telles que display est plus récent et a un support plus étroit, alors traitez cette technique spécifique comme une amélioration progressive et gardez l'appariement opacité et visibilité comme solution de repli Pour les règles faisant autorité, la spécification CSS Transitions Module Level 1 du W3 C est la source principale, et il vaut la peine d'être lu une fois que le générateur vous a donné une idée de la façon dont les pièces s'ajustent.
Si vous assemblez un ensemble plus large d'outils visuels CSS, le générateur de transformation et le Générateur de filtres CSS associez-vous naturellement à celui-ci, puisqu'une transition est ce qui lisse les transformations et les filtres que vous construisez avec eux. 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 de transition CSS ?
Un générateur de transition CSS est un outil visuel qui construit une transition CSS à partir des paramètres que vous choisissez Vous choisissez une propriété, une durée, une fonction de synchronisation et un délai, et il délivre le raccourci de transition avec un aperçu en direct que vous pouvez déclencher pour regarder l'assouplissement.
Où mettre la transition, sur l'état de base ou l'état de vol stationnaire ?
Mettez-le sur l'état de base Une transition déclarée sur la règle de base anime la propriété dans les deux sens, dans le changement de vol stationnaire et en revient. Le déclarer uniquement en vol stationnaire anime le changement mais le laisse revenir instantanément lorsque le pointeur part.
Quel est l'ordre de la sténographie de transition ?
L'ordre est propriété, durée, timing-fonction, retard, par exemple transition : opacité 300 ms facilité d'entrée sortie 100 ms. La première valeur temporelle est toujours la durée et la seconde est toujours le retard, donc une seule valeur temporelle est lue comme la durée.
Pourquoi mon affichage : aucun à afficher : transition de bloc ne sera-t-il pas animé ?
Parce que l'affichage n'est pas une propriété animable Il n'y a pas de valeur intermédiaire entre aucun et bloc, donc le navigateur n'a rien à mettre en place Transition opacity and visibilité together, ou utiliser transition-behaviour : allow-discrete dans les navigateurs plus récents pour disparaître de l'affichage : aucun.
Puis-je faire la transition de plus d'une propriété à la fois ?
Oui. Séparez chaque transition par une virgule, par exemple la transition : opacité 300 ms facilité, transformer 200 ms facilité-out Ce générateur construit cette liste pour vous pendant que vous ajoutez des couches, donnant à chaque propriété sa propre durée, fonction de synchronisation et de retard.
Qu'est-ce qu'une fonction de synchronisation cubique-bezier ?
Une fonction de synchronisation à bezier cubique définit une courbe d'accélération personnalisée à partir de deux points de contrôle, écrit cubique-bezier (x1, y1, x2, y2).Les mots-clés facilité, facilité d'entrée, facilité de sortie et facilité de sortie sont des raccourcis pour des courbes spécifiques, et les points de contrôle supérieurs à 1 ou inférieurs à 0 créent un dépassement, c'est ainsi qu'un rebond est construit.
Quelles propriétés dois-je animer pour des performances fluides ?
Préférez la transformation et l'opacité Ils sont composés sur le GPU et ne déclenchent pas la mise en page, ils animent donc à 60 ips. L'animation de la largeur, de la hauteur, du haut, de la gauche ou de la marge oblige le navigateur à recalculer la mise en page sur chaque image, ce qui est la cause la plus courante de transitions bégayantes.
La transition 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é.
