Curvas cubic-bezier
A curva, como uma tabela que dá mesmo para ler.
- curva
- 0
Resultado
Type four numbers — 0.42, 0, 0.58, 1 — or pick one of the named curves.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Como funciona
- Escolha uma curva nomeada, ou digite quatro números.
- Leia a tabela: quanto do movimento já passou a cada décimo do tempo.
- Ajuste a duração para a que você realmente vai animar, para os milissegundos significarem algo.
- Copie a função de temporização.
Perguntas frequentes
- Por que uma tabela em vez de uma curva desenhada?
- Porque a pergunta quase sempre é “está lento demais no começo?” ou “chega abrupto demais?”, e uma tabela de progresso contra tempo responde isso direto. Uma curva desenhada fica bonita e deixa você adivinhando os milissegundos do mesmo jeito.
- O que significam os quatro números?
- Dois pontos de controle: x1, y1, x2, y2. Os x são tempo e precisam ficar entre 0 e 1. Os y são progresso e podem sair desse intervalo — é exatamente isso que faz uma curva passar do ponto e voltar.
- Qual eu devo usar?
- Para algo que entra, ease-out: rápido no começo, assentando no fim. Para algo que sai, ease-in. ease-in-out para um deslocamento entre dois lugares. Linear para um indicador girando, e para quase mais nada.
- O que é uma curva back?
- Uma que passa do destino e volta — o pequeno repique que faz um diálogo parecer físico. Use em movimentos pequenos e rápidos; num grande, lê-se como erro.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você digitar fica no seu computador.
Ferramentas relacionadas
◒ Gerador de gradiente CSS Cores de um lado, uma declaração do outro. ◒ Gerador de box-shadow CSS A declaração, não uma tela para arrastar. ◒ Formatador CSS Uma declaração por linha — ou o arquivo inteiro em uma. ◒ Conversor de cor HEX, RGB, HSL e CMYK — mais a razão de contraste que decide a legibilidade.