Generador de transition CSS

Funciones

• Seis propiedades habituales: transform, opacidad, color de fondo, sombra, desenfoque y all
• Duración de 0 a 3000ms; se recomienda entre 150 y 400ms
• Seis curvas de aceleración, cada una con su carácter y su caso de uso
• Retardo ajustable, para montar entradas escalonadas
• Basta con pasar el cursor por la previa para ver la transición, sin pulsar nada
• El código entregado separa `transition` y `:hover` en dos reglas, con el reparto bien visible
• Debajo aparece el CSS completo listo para copiar, con el selector `.transition`
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Elige una propiedad (lo normal es empezar por transform u opacidad)
2. Ajusta duración y aceleración y pasa el cursor por la previa para ver el resultado
3. Si necesitas una entrada escalonada, añade algo de retardo
4. Cuando te guste, copia el CSS — y fíjate en que `transition` va en el estado de reposo y el valor final en `:hover`

Preguntas frecuentes

¿Por qué al entrar hay animación y al salir no?

Casi seguro que has puesto el `transition` dentro de `:hover`. Así, esa declaración solo está activa mientras el cursor está encima: al salir ya no está, el navegador no tiene transición que aplicar y el elemento salta de golpe. Lo correcto es escribir el `transition` en la regla base del elemento y poner en `:hover` solo el valor al que debe llegar. El código que genera la herramienta tiene esta estructura, para que lo compares.

¿Qué problema tiene `transition: all`?

Dos. Uno es el rendimiento: `all` hace que el navegador vigile toda propiedad animable, incluidas las que no pensabas tocar (algunas fuerzan un reflujo o un repintado), y en páginas complejas se nota. El otro son las animaciones inesperadas: si otra parte cambia alguna propiedad (un ancho adaptable, el color de un cambio de tema), también se transiciona, y el resultado suele ser raro. Así que mejor enumera las propiedades y deja `all` para prototipos y para salir del paso.

¿Qué propiedades son seguras de animar (sin perder fotogramas)?

`transform` y `opacity` son las dos que se consideran seguras: se resuelven por completo en la capa de composición de la GPU, sin reflujo ni repintado. En cambio `width`, `height`, `top`, `left` y `margin` provocan reflujo, y `box-shadow` o `background-color` provocan repintado; en cantidad, todas cuestan fotogramas. Por eso, para mover o escalar, mejor `transform: translate/scale` que cambiar `left` o `width` — y por eso esta herramienta pone transform como primera opción.

¿Cuánta duración pongo?

Entre 150 y 400ms está la zona cómoda de una transición de interfaz: rápida como para no notar espera y lenta como para distinguir el cambio. Por debajo de 100ms se percibe como instantáneo (no se ve que sea una transición) y por encima de 500ms la gente empieza a aguardarla. Dos reglas más: cuanto más grande el elemento y más larga la distancia, algo más de duración (un objeto grande se mueve despacio por naturaleza); y las interacciones que se repiten (hover, retorno de un clic) piden el tramo más corto, porque se ven muchas veces.