Este generador de transiciones CSS te permite crear efectos suaves con la propiedad transition y verlos en vivo. Ajusta la propiedad, la duración, la curva de aceleración y el retraso, pulsa «Probar» y copia el código. Funciona en tu navegador, sin registro y en español.
Cómo crear una transición CSS
- Elige la propiedad que quieres animar y la curva.
- Ajusta la duración y el retraso.
- Pulsa Probar transición para verla y copia el CSS.
Cómo funciona la propiedad transition
transition resume cuatro valores: la propiedad, la duración, la curva de aceleración y el retraso. Por ejemplo, transition: transform 0.6s ease-in-out 0s. La transición se dispara cuando la propiedad cambia, normalmente en estados como :hover o :focus. ¿Quieres transformar el elemento? Combínala con nuestro generador de CSS transform.
Preguntas frecuentes
¿Qué diferencia hay entre transition y animation?
transition anima un cambio entre dos estados (por ejemplo, al pasar el ratón). animation con @keyframes permite secuencias más complejas y bucles.
¿Por qué usar «all» como propiedad?
all aplica la transición a cualquier propiedad que cambie. Es cómodo, pero especificar solo las que necesitas es más eficiente en rendimiento.
¿Funciona en todos los navegadores?
Sí, transition tiene soporte total en los navegadores modernos.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
