La diferencia entre una interfaz que parece barata y una que parece considerada suele ser de un quinto de segundo. Un botón que se ajusta a su color flotante en el instante en que su puntero lo toca se lee como abrupto; el mismo botón que se adapta a ese color en más de doscientos milisegundos dice como terminado. Esa flexibilización es una transición CSS, y para algo tan pequeño es notable la frecuencia con la que lo he visto mal, lo puse en estado flotante en lugar del estado base, lo sintonicé mediante prueba y error en una docena de actualizaciones, o lo apliqué a una propiedad que no puede animarse en absoluto.
Una transición es la forma del navegador ' de animar el cambio entre dos valores de una propiedad a lo largo del tiempo, en lugar de cambiar instantáneamente. Es el caballo de batalla detrás de los efectos flotantes, los estados de enfoque, los paneles en expansión y las clases alternadas, y casi siempre es el primer movimiento que alguien agrega a un proyecto. Pero la taquigrafía agrupa cuatro valores en una línea en un orden fijo, la función de sincronización es la parte que determina cómo se siente el movimiento y hay un acantilado bien conocido del que se caen las personas cuando intentan desvanecer algo display: none. Construir la transición donde puedas verla jugar ahorra todo eso.
los Generador de transición CSS le permite elegir una propiedad, establecer la duración y el retraso en milisegundos y elegir una función de sincronización entre las palabras clave CSS y un conjunto de curvas de bisel cúbico seleccionadas. Puede acumular varias transiciones en una taquigrafía y un botón de activación reproduce el movimiento en un elemento de vista previa en vivo para que sienta la relajación antes de comprometerse con él. La declaración exacta se encuentra en un cuadro listo para copiar a continuación.
TL;Dr: Una transición CSS anima el cambio entre dos valores de una propiedad durante una duración determinada. Pertenece al estado base, no al estado flotante, por lo que el elemento se facilita en ambas direcciones. El orden abreviado es propiedad, duración, función de tiempo, retraso. No puedes hacer la transición
display, porque no tiene valores intermedios y deberías preferir animartransformyopacitypara un rendimiento fluido. Este generador expone cada pieza con una vista previa en vivo, admite múltiples capas y emite CSS limpio. Se ejecuta completamente en su navegador sin registrarse.
¿qué problema resuelve un generador de transición CSS?
La parte difícil de una transición no es la sintaxis; es que no se puede juzgar el movimiento leyéndolo. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) describe una facilidad de rebote específica, pero la única forma de saber si ese rebote se siente bien para su botón es verlo suceder. Y verlo suceder en su propio proyecto significa escribir la regla, configurar el estado de desplazamiento, guardar y mover el mouse sobre el elemento, luego ajustar un número y hacerlo todo nuevamente. Ese bucle es lo suficientemente lento como para que la mayoría de las personas se conformen con lo primero que funciona en lugar de lo que mejor se siente.
Un generador convierte ese bucle en un solo clic. Estableces una duración y presionas el disparador, y el elemento de vista previa reproduce la transición frente a ti. Cambie la función de sincronización y presiónela nuevamente, y sentirá la diferencia entre una diapositiva lineal y una solución fácil de ajustar inmediatamente. Después de algunas rondas, desarrollas una sensación de cómo se sienten doscientos milisegundos frente a quinientos, que es la intuición que separa el movimiento que ayuda del movimiento que se interpone en el camino. Cuando estás satisfecho, el CSS que funciona ya está escrito, por lo que no hay nada que transcribir.
Aquí se aplica el mismo argumento de confiabilidad que con cualquier generador visual de CSS: no se puede producir un formato incorrecto transition valore arrastrando controles deslizantes y eligiendo entre menús, para que la salida siempre sea segura para pegar. Esa es la razón por la que mantengo este tipo de herramienta cerca, el mismo instinto detrás de alcanzar el Generador de transformada CSS cuando necesito una transformación en lugar de contar grados en mi cabeza.
¿adónde va la transición, en el estado base o en el estado flotante?
Este es el error que más veo y vale la pena decirlo claramente porque la solución es muy simple. La transición pertenece al estado base del elemento 's, no a su :hover regla. Cuando la transición se declara en el estado base, el navegador anima la propiedad en ambas direcciones: se facilita en el cambio de desplazamiento cuando llega el puntero y se vuelve a soltar cuando el puntero sale. Esa simetría es lo que hace que una interacción se sienta completa.
Pon la transición sólo en :hover y obtienes un efecto desequilibrado. La propiedad se anima suavemente al entrar, porque la transición está presente mientras el elemento flota, pero en el momento en que el puntero sale, el :hover la regla ya no se aplica, la transición continúa y la propiedad vuelve instantáneamente. El resultado es un botón que se alivia con gracia y luego vuelve a bajar, lo que parece peor que ninguna animación. La salida del generador 's está escrita para ir al estado base y la guía se activa en la herramienta exactamente por esta razón. Declárgalo una vez, en el elemento mismo, y deja que los cambios de estado lo activen.
¿cuál es el orden correcto de la taquigrafía de transición?
los transition la taquigrafía empaqueta hasta cuatro valores en una línea y el orden lo fija la especificación: propiedad, duración, función de tiempo, retraso. Entonces transition: opacity 300ms ease-in-out 100ms significa la propiedad de opacidad, animada durante trescientos milisegundos, utilizando una curva de facilidad de entrada y salida, después de un retraso de cien milisegundos. Si realiza el pedido mal, el navegador ignorará la declaración o la leerá como algo que no pretendía.
La única regla que atrapa a las personas son los dos valores de tiempo. Tanto la duración como el retraso son tiempos, y CSS los distingue puramente por posición: el primer valor de tiempo es siempre la duración y el segundo es siempre el retraso. Si escribe solo un valor de tiempo, se lee como duración y el retraso permanece en su valor predeterminado de cero. Es por eso que una transición que parece comenzar demasiado pronto es a menudo un caso de retraso escrito accidentalmente primero. El generador evita todo el problema construyendo la abreviatura para usted en el orden correcto y omite el retraso por completo cuando es cero, por lo que nunca envía un seguimiento 0ms eso no hace nada. Aquí está la anatomía en una tabla.
| Parte | ejemplo | Lo que controla |
|---|---|---|
| propiedad | opacity |
Qué propiedad anima, o all por cada animable |
| duración | 300ms |
Cuánto tiempo tarda la animación; el primer valor de tiempo |
| función de sincronización | ease-in-out |
La curva de aceleración del movimiento |
| retraso | 100ms |
Cuánto tiempo esperar antes de comenzar; el segundo valor de tiempo |
¿por qué mi pantalla: ninguna transición no se animará?
Este es el acantilado y casi todo el mundo se aleja al menos una vez. Quieres que un elemento se desvanezca, así que haces la transición display de none para block y conjunto opacity, y el elemento simplemente aparece sin desvanecimiento. La razón es fundamental: display no es una propiedad animable. No hay un punto intermedio entre ellos none y block, no hay ningún valor al que el navegador pueda interpolar en la marca del cincuenta por ciento, por lo que no hay nada entre ellos. El cambio ocurre instantáneamente y cualquier animación de opacidad que coloques en capas encima se corta porque, para empezar, el elemento no se representó.
La solución clásica es animar opacity y visibility juntos y vete display fuera de esto. visibility puede realizar la transición porque, si bien también es una propiedad discreta, combinarla con una duración permite al navegador mantener el elemento visible hasta que se complete la opacidad al salir. La solución moderna lo es transition-behavior: allow-discrete, una capacidad más nueva que le permite animar propiedades discretas como display en los puntos finales de una transición, realmente puedes desaparecer display: none en navegadores que lo admiten. De cualquier manera, la lección es la misma: verifique que la propiedad que está haciendo la transición tenga valores intermedios antes de pasar una hora preguntándose por qué nada se mueve. Este es el tipo de gotcha que aparece una vista previa en vivo en segundos, que es una gran parte del argumento para generar movimiento donde puedes verlo.
¿Qué es una función de sincronización y por qué importa tanto?
La función de sincronización es la parte de una transición que decide cómo se siente el movimiento y funciona mucho más que la duración. Dos transiciones de la misma longitud pueden parecer completamente diferentes dependiendo de su curva. A linear la transición se mueve a una velocidad constante y se siente mecánica, como una pieza de máquina. Un ease-out la transición comienza rápido y se ralentiza a medida que llega, lo que se siente natural porque imita cómo los objetos físicos desaceleran y es el valor predeterminado adecuado para la mayor parte del movimiento de la interfaz. ease-in hace lo contrario y es mejor para las cosas que salen de la pantalla.
Debajo, todas estas son curvas cúbicas-bezier. Las palabras clave ease, ease-in, ease-out y ease-in-out son sólo nombres amigables para específicos cubic-bezier(x1, y1, x2, y2) valores, donde los dos puntos de control dan forma a la aceleración. Lo que hace que el bisel cúbico sea más potente es que un punto de control con a y el valor por encima de uno o por debajo de cero empuja la animación más allá de su punto final y regresa, que es como se construye un exceso o un rebote. El generador incluye una curva estándar de materiales para un movimiento limpio de la interfaz y una curva de retroceso que se excede para una sensación elástica y divertida, además de steps() función para el movimiento que salta en fotogramas discretos en lugar de deslizarse, que es como se anima un sprite o un contador de tictac. Elegir una curva y presionar el gatillo es la forma más rápida de generar una sensación de lo que hace cada uno.
¿Cuándo debo utilizar múltiples capas de transición?
Una sola transición anima una propiedad, pero las interacciones reales a menudo cambian varias a la vez. Un botón que se levanta al flotar puede cambiar el color de fondo, impulsar su transformación y profundizar su sombra, y cada uno de ellos puede querer su propio momento. El transition la propiedad maneja esto con una lista separada por comas, donde cada entrada es una transición completa con su propia propiedad, duración, función de sincronización y retraso.
El generador admite esto directamente: agregue una capa para cada propiedad, sintonice cada una de forma independiente y la herramienta las una en una taquigrafía transition: background-color 200ms ease, transform 200ms ease-out. La razón para dar a las propiedades transiciones separadas en lugar de usarlas all es control y rendimiento. transition: all es conveniente, pero anima todas las propiedades que cambian, incluidas aquellas que no pretendía, y obliga al navegador a observar todo en busca de cambios. Nombrar las propiedades específicas es más predecible y económico. El ajuste preestablecido de revelación lenta en la herramienta muestra una transición de dos capas, desvaneciendo la opacidad y moviendo una transformación junto con un retraso compartido, que es la receta estándar para un elemento que se facilita a la vista. Si el lado transformador de ese emparejamiento es lo que estás sintonizando, el Generador de transformada CSS es la herramienta complementaria y las dos casi siempre se usan juntas.
¿qué propiedades debo animar para un rendimiento fluido?
No todas las propiedades son igualmente baratas de animar, y la elección tiene un efecto directo sobre si su transición se ejecuta a sesenta fotogramas por segundo o tartamudea. Las dos propiedades que preferir son transform y opacity. Ambos se pueden entregar a la GPU y componer sin volver a calcular el diseño de la página, por lo que animarlos se mantiene fluido incluso en hardware modesto. Por eso aparece una tarjeta con la que se desliza transform: translateX se siente mantecoso mientras se anima la misma carta left se siente duro.
Las propiedades a evitar animar son las que desencadenan el diseño: width, height, top, left, margin y padding. Cambiar cualquiera de estos obliga al navegador a volver a calcular la posición y el tamaño del elemento y todo lo afectado por él, en cada fotograma de la animación, lo cual es costoso y es la causa más común de movimiento janky. Si quieres animar un ancho, normalmente vale la pena preguntar si a transform: scaleX produciría un efecto similar a un precio más económico. El generador le permite elegir cualquier propiedad para que nunca se le bloquee, pero las propiedades que enumera se colocan transform y opacity cerca de la cima porque esos son los que debes alcanzar primero. El caso más amplio para construir un conjunto considerado de herramientas como esta se encuentra en el Kit de herramientas para desarrolladores web pieza, y los hábitos de flujo de trabajo detrás de ella están en el Herramientas de productividad para desarrolladores guía.
¿Cómo mantiene honesta la vista previa el generador?
Cada generador visual enfrenta el mismo riesgo: la vista previa y el código exportado se separan hasta que la herramienta le enseña un valor que no se reproducirá. Este generador aplica exactamente transition valora el elemento de vista previa y lo activa con un cambio de estado real, por lo que el movimiento que ve es el movimiento que producirá el CSS copiado. No existe una ruta de animación separada que pueda estar en desacuerdo.
Debido a que una transición solo se ejecuta cuando cambia una propiedad, la vista previa necesita un estado entre, que es lo que hace el botón de activación: voltea el elemento entre dos conjuntos de valores para que la transición se active y puedas verlo. Esto refleja cómo funciona una transición en la naturaleza, donde lo que la desencadena es un desplazamiento, un enfoque o una clase alternada. La salida también permanece mínima, eliminando el retraso cuando es cero y enumerando solo las capas que agregó, la misma disciplina de emitir solo declaraciones significativas que se ejecuta a través de generador de gradiente y el generador de sombras de caja.
¿qué navegadores admiten transiciones CSS?
Las transiciones CSS son compatibles con todos los navegadores actuales y lo han sido durante más de una década. El transition la propiedad y todos sus recursos son universales y sin prefijo, por lo que la salida de este generador funciona en Chrome, Firefox, Safari y Edge sin prefijos ni alternativas de proveedores. El más nuevo transition-behavior: allow-discrete capacidad para animar propiedades discretas como display es más reciente y tiene un soporte más limitado, así que trate esa técnica específica como una mejora progresiva y mantenga el emparejamiento de opacidad y visibilidad como alternativa. Para las reglas autorizadas, la especificación de nivel 1 del módulo de transiciones CSS del W3C es la fuente principal, y vale la pena leerla una vez que el generador le haya dado una idea de cómo encajan las piezas.
Si está ensamblando un conjunto más amplio de herramientas visuales CSS, el generador de transformaciones y el Generador de filtros CSS combínelo naturalmente con este, ya que una transición es lo que suaviza las transformaciones y filtros que construye con ellos. Aquí todo se ejecuta en el lado del cliente y el CSS que copia es suyo para usarlo sin tiempo de ejecución, sin paso de compilación ni dependencia.
Preguntas frecuentes
¿qué es un generador de transición CSS?
Un generador de transición CSS es una herramienta visual que crea una transición CSS a partir de la configuración que elija. Usted elige una propiedad, duración, función de sincronización y retraso, y genera la taquigrafía de transición con una vista previa en vivo que puede activar para ver la flexibilización.
¿dónde pongo la transición, en el estado base o en el estado flotante?
Ponlo en el estado base. Una transición declarada en la regla base anima la propiedad en ambas direcciones, hacia el cambio flotante y hacia atrás. Declararlo solo en el desplazamiento anima el cambio pero le permite retroceder instantáneamente cuando el puntero se va.
¿cuál es el orden de la taquigrafía de transición?
El orden es propiedad, duración, función de tiempo, retraso, por ejemplo transición: opacidad 300 ms facilidad de entrada y salida 100 ms. El primer valor de tiempo es siempre la duración y el segundo es siempre el retraso, por lo que se lee un único valor de tiempo como duración.
¿por qué mi pantalla: ninguna para mostrar: la transición de bloque no se anima?
Porque la visualización no es una propiedad animable. No hay un valor intermedio entre ninguno y bloque, por lo que el navegador no tiene nada que ver. En su lugar, transicione opacidad y visibilidad juntas, o use comportamiento de transición: permita que lo discreto en navegadores más nuevos desaparezca de la visualización: ninguno.
¿Puedo hacer la transición de más de una propiedad a la vez?
Sí. Separe cada transición con una coma, por ejemplo transición: opacidad 300 ms facilidad, transforme 200 ms facilidad. Este generador crea esa lista para usted a medida que agrega capas, dándole a cada propiedad su propia duración, función de sincronización y retraso.
¿qué es una función de sincronización de bisel cúbico?
Una función de sincronización de bisel cúbico define una curva de aceleración personalizada a partir de dos puntos de control, escritos cúbico-bisier (x1, y1, x2, y2). Las palabras clave facilidad, facilidad de entrada, facilidad de salida y facilidad de entrada son atajos para curvas específicas, y los puntos de control por encima de 1 o por debajo de 0 crean un exceso, que es como se construye un rebote.
¿qué propiedades debo animar para un rendimiento fluido?
Prefiere transformación y opacidad. Están compuestos en la GPU y no activan el diseño, por lo que se animan a 60 fps. Animar el ancho, el alto, la parte superior, la izquierda o el margen obliga al navegador a recalcular el diseño en cada cuadro, que es la causa más común de transiciones tartamudas.
¿la transición generada CSS es gratuita y segura de usar?
Sí. La herramienta es completamente gratuita, sin límites de registro ni uso, y emite CSS estándar sin prefijo compatible con todos los navegadores modernos. Todo el procesamiento ocurre en su navegador, por lo que no se carga nada y la herramienta funciona sin conexión una vez cargada.
