Générateur de transition CSS

Le générateur de transition CSS est un éditeur visuel pour la propriété de transition CSS. Vous choisissez quelle propriété animer, définissez la durée, choisissez une fonction de synchronisation et ajoutez un délai, puis déclenchez un aperçu en direct pour regarder l'assouplissement exact avant de copier la déclaration. Vous pouvez superposer plusieurs transitions en un seul raccourci - par exemple l'opacité de l'évanouissement lors du déplacement d'une transformation - et chaque couche obtient sa propre propriété, durée, timing et retard.

Une transition indique au navigateur d'animer le changement entre deux valeurs d'une propriété plutôt que de changer instantanément. Changer une couleur d'arrière-plan en vol stationnaire sans transition et elle s'enclenche ; ajouter une transition : arrière-plan-couleur 200 ms de facilité et le même changement se facilite sur un cinquième de seconde. La transition vit sur l'état de base, pas sur l'état de vol stationnaire, donc l'élément anime à la fois dans et hors du changement, ce qui donne à une interaction l'impression d'être terminée plutôt que brusque sur le chemin du retour.

Tout se passe dans votre navigateur Partez d'un préréglage comme Fade, Button hover ou Bounce, ajustez les curseurs et sélectionne, appuyez sur le déclencheur d'aperçu pour voir le mouvement, et copiez la sténographie L'outil écrit les quatre parties dans l'ordre requis par la spécification - propriété, durée, chronométrage-fonction, retard - et omet le délai lorsqu'il est nul Pas de compte, pas de téléchargements, et il continue de fonctionner hors ligne une fois la page chargée.

L'erreur la plus courante consiste à essayer de faire évoluer une propriété qui n'a pas de valeurs intermédiaires. affichage : aucun à afficher : le bloc ne peut pas animer, car l'affichage n'est pas une propriété animable - il n'y a pas de moitié entre aucun et bloc - c'est pourquoi un fondu intégré à l'affichage seul saute. Le correctif consiste à faire passer l'opacité et la visibilité ensemble, ou à utiliser le comportement plus récent autorisé et discret. Cela vaut également la peine d'animer la transformation et l'opacité de préférence à la largeur, à la hauteur, au sommet ou à la gauche : les deux premiers sont composés sur le GPU et ne déclenchent pas la mise en page, ils restent donc fluides, tout en animant les propriétés de mise en forme, tout en animant, tout en recalculant, tout en recalculant les propriétés de mise en recalculant et en recalculant la page et en toute image et en étant la page.