Curvas cubic-bezier
A curva, como uma tabela que dá mesmo para ler.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
0 caracteres
- curva
- 0
Resultado
Digite quatro números, como 0.42, 0, 0.58, 1, ou escolha uma curva.
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.
Exemplo
Exemplo prático — Curvas cubic-bezier
Escolha uma curva nomeada, ou digite quatro números. Use os dados e as configurações a seguir. Mantenha as demais configurações padrão da página.
| Item | Valor |
|---|---|
| Entrada | 0.25, 0.1, 0.25, 1 |
| Saída 1 | cubic-bezier(0.25, 0.1, 0.25, 1) |
| Saída 2 | 300 ms → 80.2% |
| Saída 3 | 600 ms → 100% |
Esses quatro valores descrevem ease. Aos 300 ms de uma animação de 600 ms, o progresso é de cerca de 80,2%.
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.