Los números reales detrás de la facilidad de entrada y salida de CSS
Diseñe una función de sincronización CSS cúbica-bezier() personalizada arrastrando dos puntos de control, obtenga una vista previa en vivo con una referencia lineal y luego copie el valor listo.
Resultado
Esta página abre el generador de Bézier cúbico con x1=0.42, y1=0, x2=0.58, y2=1 ya cargados: los puntos de control exactos a los que se expande la palabra clave CSS de entrada y salida. Arrastre cualquiera de los controladores o edite los números directamente y la curva, la vista previa de la animación y la cadena copiable se actualizarán inmediatamente.
facilidad de entrada y salida es una de las cinco palabras clave de sincronización CSS integradas, y es popular precisamente porque esta curva se acelera suavemente desde el principio, mantiene un ritmo bastante uniforme en el medio y disminuye antes del final, una forma que se lee como natural para la mayoría de los movimientos de la interfaz de usuario. Verlos como puntos de control explícitos en lugar de un nombre de palabra clave hace obvio por qué: y1 se encuentra cerca de 0 e y2 se encuentra cerca de 1, ambos cerca de su x coincidente, por lo que no hay exceso en ninguna dirección.
Utilice estos cuatro números como punto de partida en lugar de la palabra clave en sí siempre que necesite empujar ligeramente la sensación: tire de x1 hacia abajo para un comienzo más ágil o presione y2 por encima de 1 para convertir esta misma forma en un sobrepaso suave. Cada cambio actualiza la vista previa y la línea cúbica-bezier() copiable al instante.