Datos clave
- Categoría
- Diseño y color
- Tipos de entrada
- text, select, number
- Tipo de salida
- html
- Cobertura de muestras
- 4
- API disponible
- Yes
Resumen
El Visualizador de Easing y Animación CSS le permite diseñar y ajustar curvas de transición cubic-bezier personalizadas o predefinidas mediante una representación gráfica interactiva. La herramienta genera una curva SVG detallada, ofrece vistas previas en tiempo real para transformaciones de posición, opacidad y escala, y proporciona código CSS listo para copiar en formatos de transición y fotogramas clave.
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.
Ejemplos
1. Ajustar una curva ease-out-back para un botón
Diseñador de interfaces de usuario- Contexto
- Se requiere un efecto de rebote sutil al pasar el cursor sobre los botones principales del sitio web.
- Problema
- Encontrar los valores cubic-bezier exactos para lograr un rebote fluido sin que la animación se sienta lenta o exagerada.
- Cómo usarlo
- Seleccione el preset 'ease-out-back' o introduzca 'cubic-bezier(0.34, 1.56, 0.64, 1)', defina la duración en 600 ms y observe la vista previa de escala.
- Configuración de ejemplo
-
{"easing": "cubic-bezier(0.34, 1.56, 0.64, 1)", "preset": "ease-out-back", "duration": 600, "delay": 0} - Resultado
- Se obtiene una curva con rebasamiento suave y el código CSS listo para aplicar en la transición de escala del botón.
2. Animación de entrada rápida para menú lateral
Desarrollador Frontend- Contexto
- Un menú de navegación lateral debe deslizarse rápidamente desde la izquierda al hacer clic.
- Problema
- Las transiciones estándar como 'ease-out' se sienten lentas y no transmiten la reactividad deseada en la aplicación.
- Cómo usarlo
- Seleccione el preset 'snappy' o configure una curva personalizada con aceleración inicial rápida, ajuste la duración a 300 ms y evalúe la vista previa de traslación.
- Configuración de ejemplo
-
{"easing": "cubic-bezier(0.19, 1, 0.22, 1)", "preset": "snappy", "duration": 300, "delay": 0} - Resultado
- El menú se desliza con una aceleración inicial alta y un frenado suave, mejorando la percepción de velocidad de la interfaz.
Probar con muestras
designEjemplos del Framework CSS 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
title token css
Ejemplos del Framework CSS Milligram
Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes
title token css
Ejemplos de Tailwind CSS
Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada
title token css
Ejemplos de Selectores CSS
Colección de ejemplos de selectores CSS para pruebas de extracción y análisis
title token css
Hubs relacionados
Herramientas de conversion de espacios de color para web e impresion
Herramientas reunidas para conversion de espacios de color entre web e impresion en un solo hub.
Generadores de efectos CSS, paletas y tokens de diseno
Herramientas reunidas para efectos visuales CSS, construccion de paletas y generacion de tokens de diseno en un solo hub.
Herramientas de auditoria de accesibilidad web y color accesible
Revisa problemas WCAG, orden de lector de pantalla, fallos de contraste, riesgo de vision cromatica y elecciones de color accesible en un solo hub para flujos de accesibilidad web.
Herramientas de Diseño de Color y Conversión de Espacios de Color
Comparar convertidores de color, generadores de paletas, herramientas de armonía, verificadores de accesibilidad y utilidades de ajuste de color en un solo lugar para diseñadores y desarrolladores.
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.