6XC

Generador de Transition CSS

Crea una transition — propiedad, duración, función de temporización y retraso — y pruébala en vivo con un clic.

912 visitas

La Propiedad transition

Sintaxis: transition: propiedad duración función-de-temporización retraso. Anima los cambios activados por hover, focus o cambios de clase. La función de temporización define la sensación: ease es el valor natural por defecto, ease-out es ideal para entradas, y las curvas cubic-bezier personalizadas crean rebotes elásticos. Pulsa el botón de prueba para ver tus ajustes en acción.

Preguntas Frecuentes

¿Qué propiedades son económicas de animar?

transform y opacity — el navegador puede componerlas en la GPU sin recalcular el diseño. Animar width, height o top fuerza el diseño en cada fotograma y puede causar tirones.

¿Cuál es una buena duración por defecto?

150-250 ms para pequeños comentarios de interfaz (botones, hover) y 300-500 ms para movimientos más grandes. Por encima de ~700 ms las interfaces empiezan a sentirse lentas.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar