Os números reais por trás da facilidade de entrada do CSS
Projete uma função de temporização CSS cube-bezier() personalizada arrastando dois pontos de controle, visualize-a ao vivo em uma referência linear e copie o valor pronto.
Resultado
Esta página abre o gerador de bezier cúbico com x1=0,42, y1=0, x2=0,58, y2=1 já carregado — os pontos de controle exatos para os quais a palavra-chave CSS easy-in-out se expande. Arraste qualquer alça ou edite os números diretamente, e a curva, a visualização da animação e a string copiável são atualizadas imediatamente.
easy-in-out é uma das cinco palavras-chave de tempo CSS integradas e é popular precisamente porque essa curva acelera suavemente desde o início, mantém um ritmo bastante uniforme no meio e diminui antes do final - uma forma que parece natural para a maioria dos movimentos da IU. Vê-los como pontos de controle explícitos em vez de um nome de palavra-chave torna óbvio o porquê: y1 fica perto de 0 e y2 fica perto de 1, ambos próximos de x correspondente, portanto, não há ultrapassagem em nenhuma direção.
Use esses quatro números como ponto de partida, em vez da palavra-chave em si, sempre que precisar alterar levemente a sensação - puxe x1 para baixo para um início mais rápido ou pressione y2 acima de 1 para transformar essa mesma forma em uma ultrapassagem suave. Cada alteração atualiza a visualização e a linha cube-bezier() copiável instantaneamente.