cubic-bezier() es una función de temporización CSS que define cómo acelera y desacelera una animación. Sus cuatro valores — x1, y1, x2, y2 — son dos puntos de control de una curva que mapea el tiempo al progreso. El eje X representa el tiempo (0 a 1) y el eje Y el progreso de la animación.
Elige un preset o arrastra los puntos de control naranjas del lienzo para dar forma a tu curva de easing. La bola animada muestra exactamente cómo se siente tu temporización, y la salida CSS está lista para pegar en cualquier transición o animación.
Frequently Asked Questions
Q: ¿Qué es cubic-bezier en CSS?
¿Qué es cubic-bezier en CSS? Es una función de temporización usada en transiciones y animaciones que define la curva de velocidad: cuán rápido progresa una animación en el tiempo. El valor por defecto es cubic-bezier(0.25, 0.1, 0.25, 1), también llamado ease.
Q: ¿Cuáles son los valores de easing estándar?
¿Cuáles son los valores de easing estándar? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) y linear = (0, 0, 1, 1).
Q: ¿Cómo creo un efecto de rebote?
¿Cómo creo un efecto de rebote? Sobrepasa los valores Y más allá de 1, como cubic-bezier(0.34, 1.56, 0.64, 1). La curva excede brevemente el objetivo y vuelve — un rebote tipo resorte.
Q: ¿Por qué mi animación se ve rota con Y negativa?
¿Por qué mi animación se ve rota con Y negativa? La Y negativa crea anticipación — el elemento se mueve hacia atrás antes de avanzar. Es intencional para efectos de back-easing pero se ve mal en la mayoría de transiciones de contenido.
Q: ¿Se puede usar cubic-bezier en animaciones?
¿Se puede usar cubic-bezier en animaciones? Sí, tanto en transiciones como en animaciones @keyframes, mediante la propiedad timing-function. También se aplica a animaciones vinculadas al scroll.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.