Neste artigo
O que sao curvas de Bezier cubicas?
Uma curva de Bezier cubica e uma funcao matematica usada em CSS para definir o tempo de animacoes e transicoes. Escrita como cubic-bezier(x1, y1, x2, y2), descreve como uma animacao progride do inicio ao fim mapeando o tempo para o progresso ao longo de uma curva suave definida por quatro pontos de controle.
No CSS, a funcao cubic-bezier() controla o easing das propriedades transition-timing-function e animation-timing-function. Em vez de movimento linear, permite criar aceleracoes e desaceleracoes naturais que imitam a fisica do mundo real, fazendo com que as animacoes da interface parecam refinadas e intencionais.
Entendendo os quatro valores de controle
A funcao cubic-bezier() recebe quatro valores que definem dois pontos de controle na curva. Esses pontos de controle moldam como a animacao acelera e desacelera.
- X1 (0-1) — a posicao horizontal do primeiro ponto de controle, determinando quando a fase de aceleracao inicial termina
- Y1 (qualquer valor) — a posicao vertical do primeiro ponto de controle, controlando a velocidade de inicio da animacao. Valores acima de 1 criam um efeito de overshoot
- X2 (0-1) — a posicao horizontal do segundo ponto de controle, determinando quando a fase de desaceleracao comeca
- Y2 (qualquer valor) — a posicao vertical do segundo ponto de controle, controlando como a animacao termina. Valores acima de 1 criam um ricochete de overshoot
Experimente gratuitamente — sem cadastro
Criar uma curva de Bezier cubica →Presets de easing comuns e quando usa-los
O CSS fornece varias palavras-chave de easing integradas que correspondem a valores cubic-bezier especificos. Entender esses presets ajuda a escolher a sensacao certa para suas animacoes.
- ease (0.25, 0.1, 0.25, 1.0) — o padrao CSS, inicia rapidamente e depois desacelera suavemente. Bom para a maioria das transicoes gerais
- ease-in (0.42, 0, 1.0, 1.0) — inicia devagar e acelera. Melhor para elementos saindo da tela ou desaparecendo
- ease-out (0, 0, 0.58, 1.0) — inicia rapido e desacelera. Ideal para elementos entrando na tela ou aparecendo
- ease-in-out (0.42, 0, 0.58, 1.0) — inicio e fim lentos com meio rapido. Adequado para animacoes em loop ou elementos que permanecem na tela
- linear (0, 0, 1, 1) — velocidade constante do inicio ao fim. Use para barras de progresso, spinners de carregamento ou transicoes de cor onde a velocidade uniforme parece natural
Perguntas frequentes
Todos os navegadores suportam cubic-bezier()?
Sim. A funcao cubic-bezier() e suportada em todos os principais navegadores desde o IE 10 (2012). Faz parte das especificacoes CSS Transitions e CSS Animations, que tem suporte completo no Chrome, Firefox, Safari, Edge e todos os navegadores moveis modernos.
E possivel criar animacoes de mola ou ricochete com cubic-bezier()?
Curvas de Bezier cubicas podem aproximar efeitos simples de ricochete usando valores Y maiores que 1 (overshoot). Por exemplo, cubic-bezier(0.34, 1.56, 0.64, 1) cria um leve overshoot. No entanto, a verdadeira fisica de mola com multiplos ricochetes requer CSS spring() (ainda nao amplamente suportado) ou bibliotecas de animacao JavaScript como GSAP ou Framer Motion.
Qual e a diferenca entre transicoes CSS e animacoes CSS?
Transicoes CSS animam entre dois estados quando uma propriedade muda (por exemplo, no hover). Animacoes CSS usam keyframes para definir sequencias de multiplas etapas que podem repetir e executar independentemente. Ambas usam as mesmas funcoes de tempo, incluindo cubic-bezier(), para controlar o easing entre estados ou keyframes.