# Visualizador de Easing y Animación CSS Visualiza una curva de easing cubic-bezier de CSS, previsualízala en posición/opacidad/escala, elige presets y exporta CSS listo para copiar > Página canónica: https://elysiatools.com/es/tools/css-easing-visualizer - **Categoría:** Design - **Palabras clave:** easing, cubic-bezier, animación, css, curva ## Descripción general Ajusta el tiempo de animación CSS viendo la curva de easing y una vista previa en vivo a la vez. Entradas: - Escribe un cubic-bezier(x1, y1, x2, y2) personalizado, elige un preset con nombre (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…), o escribe una palabra clave. - Ajusta duración (ms) y retardo (ms). El informe muestra: - La curva de easing (progreso vs tiempo) como SVG, con los dos puntos de control Bézier marcados, contra una referencia lineal discontinua. Las curvas con rebasamiento (y<0 o y>1, como ease-out-back) se señalan porque producen rebote pero pueden causar saltos de layout. - Tres vistas previas en vivo — translateX, opacity y scale — animadas con el easing CSS real, con botón de repetición. - CSS listo para copiar en formato `transition` y `@keyframes`. El solucionador Bézier usa Newton-Raphson con respaldo de bisección para mapear tiempo → progreso igual que los navegadores. ## Entradas - **Entrada de easing** (text): cubic-bezier(0.34, 1.56, 0.64, 1) · ease-out · linear - **Preset** (select) - **Duración (ms)** (number) - **Retardo (ms)** (number) ## Cuándo usarlo - Cuando necesite ajustar con precisión el ritmo de una transición CSS utilizando curvas cubic-bezier personalizadas. - Al diseñar animaciones con efectos de rebote o rebasamiento y querer verificar si causarán saltos de diseño. - Para comparar de forma interactiva diferentes ajustes preestablecidos de velocidad antes de implementar el código en su hoja de estilos. ## Cómo funciona - Introduzca una función cubic-bezier personalizada o seleccione uno de los presets disponibles como ease-in-out o snappy. - Configure la duración y el retardo de la animación en milisegundos para simular el comportamiento temporal exacto. - Observe la curva SVG generada con sus puntos de control y reproduzca las vistas previas en vivo de traslación, opacidad y escala. - Copie el código CSS generado automáticamente en formato de propiedad transition o reglas @keyframes para integrarlo en su proyecto. ## Casos de uso - Creación de efectos de rebote elásticos para botones de llamada a la acción mediante curvas con valores de rebasamiento. - Ajuste fino de transiciones suaves de desvanecimiento y escala en ventanas emergentes y menús desplegables. - Optimización de la sincronización de animaciones de carga (spinners) para lograr un movimiento fluido y constante. ## Preguntas frecuentes ### ¿Qué es una curva cubic-bezier en CSS? Es una función matemática que define la velocidad de una transición o animación a lo largo del tiempo mediante cuatro puntos de control. ### ¿Cómo calcula la herramienta el progreso de la animación? Utiliza un solucionador numérico basado en el método de Newton-Raphson con respaldo de bisección, imitando el comportamiento exacto de los navegadores web. ### ¿Qué significa que una curva tenga rebasamiento (overshoot)? Significa que los valores de control exceden el rango de 0 a 1, creando un efecto de rebote elástico que puede alterar temporalmente el diseño de la página. ### ¿Qué propiedades se pueden previsualizar en vivo? La herramienta muestra animaciones en tiempo real para la traslación horizontal (translateX), la opacidad (opacity) y la escala (scale). ### ¿Puedo exportar el código para animaciones complejas? Sí, la herramienta genera código CSS optimizado tanto para la propiedad abreviada transition como para bloques de animación @keyframes. ## Herramientas relacionadas - [Convertidor de espacios de color](https://elysiatools.com/es/tools/color-space-converter): Convierte colores entre HEX, RGB, HSL, CIELAB y Display-P3 con salida CSS y control de gama. - [Conversor de color CMYK](https://elysiatools.com/es/tools/cmyk-converter): Convierte colores entre HEX, RGB, HSL y CMYK. - [Conversor de Color OKLCH](https://elysiatools.com/es/tools/oklch-color-converter): Convierte entre HEX, RGB, HSL, OKLCH y Display-P3 con la matemática de CSS Color 4, con lectura de luminosidad/croma/tono, comprobación de gamut sRGB y Display-P3, y sugerencia de recorte fuera de gamut - [Generador de Animaciones CSS](https://elysiatools.com/es/tools/animation-generator): Genera fotogramas clave y propiedades de animación CSS - [Extractor de paleta desde URL de imagen](https://elysiatools.com/es/tools/color-palette-extractor-from-image-url): Obtiene una URL de imagen remota, extrae colores dominantes, exporta archivos de paleta listos para codigo y revisa el contraste - [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano. - [Generador de snippets CSS glassmorphism / neumorfismo](https://elysiatools.com/es/tools/glassmorphism-css-snippet-builder): Genera el snippet CSS completo de glassmorphism o neumorfismo de punta a punta: ajusta desenfoque, saturación, opacidad del tinte, radio, borde, sombra externa y brillo superior; opcionalmente superposición de grano SVG feTurbulence y degradación @supports; incluye automáticamente el prefijo -webkit-backdrop-filter (obligatorio antes de Safari 18) y el mapeo a clases Tailwind (con la nota de diferencias v3/v4), con vista previa en vivo de la tarjeta sobre un fondo degradado. - [Extractor de paleta de color desde imagen](https://elysiatools.com/es/tools/image-color-palette-extractor): Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste ## Ejemplos - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS - [Ejemplos del Framework CSS Milligram](https://elysiatools.com/es/samples/milligram): Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato ## Contenido relacionado - [Creación de CSS, maquetación y flujo en cascada](https://elysiatools.com/es/hubs/css-authoring-layout-and-cascade-workflows): Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.