Puntos de control
0.4, 0, 0.2, 1
Salida
cubic-bezier(0.4, 0, 0.2, 1)
Herramientas de diseño
Cubic Bezier CSS — Depurador de curvas de suavizado
Edita visualmente los cuatro puntos de control de cubic-bezier, previsualiza la curva de suavizado y copia una función de temporización para transiciones y animaciones: útil para movimientos de botón y transiciones de página.
CSSAnimaciónSuavizado
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Cubic Bezier CSS
Edita visualmente los cuatro puntos de control de cubic-bezier, previsualiza la curva de suavizado y copia una función de temporización para transiciones y animaciones: útil para movimientos de botón y transiciones de página.
最终 CSS 转场代码
调整控制点或时长后，预览动画和复制代码会保持一致。
Casos de uso
- Ajusta la temporización del movimiento de botones
- Crea el suavizado de las transiciones de página
- Empareja una curva de movimiento de un archivo de diseño
Cómo usar
- Arrastra o introduce los cuatro puntos de control
- Previsualiza la curva y la animación
- Copia el valor cubic-bezier
Entrada y salida de ejemplo
FAQ
¿Puedo usarlo directamente en transition?
Sí. Pega cubic-bezier(...) en transition-timing-function o animation-timing-function.
¿Qué rango usan los puntos de control?
x suele estar entre 0 y 1; y puede salir de 0–1 para rebasar. Confirma la sensación en la vista previa.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Generador de degradados CSS
Generador de degradados CSS — Lineal, radial, cónico
Crea visualmente degradados CSS lineales, radiales y cónicos. Ajusta el ángulo y las posiciones de parada, añade varias paradas y copia el CSS para fondos, botones y transiciones de marca.
CSS Degradado Fondo
Generador de clamp CSS
Generador de clamp CSS — Tamaños fluidos adaptables
A partir de anchos de viewport mínimo/máximo y un rango de tamaño objetivo, calcula una fórmula clamp() para tamaños de fuente fluidos, espaciado y otras longitudes que escalan con el viewport.
CSS clamp Adaptable