Qual é o easing padrão do CSS?

Transições e animações usam ease por padrão, que equivale a cubic-bezier(0.25, 0.1, 0.25, 1): um início rápido e um final suave.

Como criar um efeito de ultrapassagem ou de quique?

Arraste uma alça para acima de 1 ou abaixo de 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), passa do ponto final e volta a ele. Uma única curva cúbica de Bézier não consegue quicar várias vezes; para isso, use keyframes ou a função linear().

Posso usar o mesmo valor em animações?

Sim. O valor funciona em transition-timing-function, animation-timing-function e na opção easing da Web Animations API.

Gerador de Cubic Bezier

Modele curvas de easing CSS arrastando duas alças. Compare o movimento com o tempo linear e copie o cubic-bezier() para transições ou Tailwind.

Editor de curva

Arraste qualquer uma das alças. A linha tracejada é o tempo linear.

Prévia do movimento

Sua curva

Linear

Posição a cada décimo da duração

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Tudo permanece no seu navegador.

Referências de formatos

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Página da ferramenta atualizada: 2026-10-25

Editor de curva

Prévia do movimento

Guia e exemplo

Ferramentas relacionadas

Referências de formatos