Generador de transición CSS

El generador de transición CSS es un editor visual de la propiedad de transición CSS. Usted elige qué propiedad animar, establece la duración, elige una función de sincronización y agrega un retraso, luego activa una vista previa en vivo para ver la flexibilización exacta antes de copiar la declaración. Puede superponer varias transiciones en una taquigrafía (por ejemplo, desvanecer la opacidad mientras mueve una transformación) y cada capa obtiene su propia propiedad, duración, tiempo y retraso.

Una transición le dice al navegador que anime el cambio entre dos valores de una propiedad en lugar de cambiar instantáneamente. Cambie el color de fondo al flotar sin transición y se romperá; agregue transición: el color de fondo se facilita 200 ms y el mismo cambio se facilita en un quinto de segundo. La transición vive en el estado base, no en el estado flotante, por lo que el elemento se anima tanto dentro como fuera del cambio, que es lo que hace que una interacción parezca terminada en lugar de abrupta en el camino de regreso.

Todo sucede en tu navegador. Comience desde un ajuste preestablecido como Fade, Button hover o Bounce, ajuste los controles deslizantes y seleccione, presione el disparador de vista previa para ver el movimiento y copie la taquigrafía. La herramienta escribe las cuatro partes en el orden que requiere la especificación (propiedad, duración, función de sincronización, retraso) y omite el retraso cuando es cero. Sin cuenta, sin cargas y sigue funcionando sin conexión una vez que se ha cargado la página.

El error más común es intentar realizar la transición de una propiedad que no tiene valores intermedios. pantalla: ninguna para mostrar: el bloque no se puede animar, porque la visualización no es una propiedad animable (no hay un punto medio entre ninguno y el bloque), razón por la cual salta solo una pantalla integrada que se desvanece. La solución es realizar la transición de opacidad y visibilidad juntas, o utilizar el comportamiento más nuevo de permitir discreto. También vale la pena animar la transformación y la opacidad con preferencia al ancho, alto, superior o izquierdo: los dos primeros están compuestos en la GPU y no activan el diseño, por lo que se mantienen fluidos, mientras que las propiedades de diseño de animación recalculan la página en cada cuadro y son la fuente habitual de transiciones tintineantes y tartamudas.