Gerador de Easing CSS
Ajuste curvas cubic-bezier para transitions e animations de CSS enquanto pré-visualiza o movimento.
CURVAease
Arraste os controles ou edite os números para ajustar a curva.
Valor atualcubic-bezier(0.25, 0.1, 0.25, 1)
PREVIEW
O elemento se move com o mesmo easing. Ao mudar os valores, a prévia é reproduzida novamente.
CSS
Use como timing function em transitions ou animations de CSS.
.element {
transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element.is-active {
transform: translateX(120px);
}SOBRE ESTA FERRAMENTA
Ajuste curvas cubic-bezier para transitions e animations de CSS enquanto pré-visualiza o movimento.
- Esta ferramenta roda no seu navegador. Arquivos e conteúdo digitado não são enviados ao servidor para processamento.
CASOS DE USO
- Ajustar easing para transitions e animations de CSS
- Pré-visualizar movimentos cubic-bezier a partir de presets comuns
- Copiar o valor ajustado como código CSS
PERGUNTAS FREQUENTES
- O que esta ferramenta faz?
- Ajuste curvas cubic-bezier para transitions e animations de CSS enquanto pré-visualiza o movimento.
- Como a entrada é tratada?
- O processamento acontece no seu navegador. Arquivos e conteúdo digitado não são enviados ao servidor para processamento.
- Os presets padrão de CSS não são suficientes?
- Muitas vezes são. Quando você precisa ajustar melhor a resposta da interface ou o fim do movimento, editar cubic-bezier com prévia visual fica mais prático.