Neste artigo
O que sao curvas de Bezier cubicas?
Uma curva de Bezier cubica e uma função matemática usada em CSS para definir o tempo de animações e transições. Escrita como cubic-bezier(x1, y1, x2, y2), descreve como uma animação 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 função cubic-bezier() controla o easing das propriedades transition-timing-function e animation-timing-function. Em vez de movimento linear, permite criar acelerações e desaceleracoes naturais que imitam a fisica do mundo real, fazendo com que as animações da interface parecam refinadas e intencionais.
Entendendo os quatro valores de controle
A função cubic-bezier() recebe quatro valores que definem dois pontos de controle na curva. Esses pontos de controle moldam como a animação acelera e desacelera.
- X1 (0-1) — a posição horizontal do primeiro ponto de controle, determinando quando a fase de aceleracao inicial termina
- Y1 (qualquer valor) — a posição vertical do primeiro ponto de controle, controlando a velocidade de inicio da animação. Valores acima de 1 criam um efeito de overshoot
- X2 (0-1) — a posição horizontal do segundo ponto de controle, determinando quando a fase de desaceleracao começa
- Y2 (qualquer valor) — a posição vertical do segundo ponto de controle, controlando como a animação 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 sensação certa para suas animações.
- ease (0.25, 0.1, 0.25, 1.0) — o padrão CSS, inicia rapidamente e depois desacelera suavemente. Bom para a maioria das transições 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 rápido 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 rápido. Adequado para animações 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 transições de cor onde a velocidade uniforme parece natural
Perguntas frequentes
Todos os navegadores suportam cubic-bezier()?
Sim. A função cubic-bezier() e suportada em todos os principais navegadores desde o IE 10 (2012). Faz parte das especificações CSS Transitions e CSS Animations, que tem suporte completo no Chrome, Firefox, Safari, Edge e todos os navegadores moveis modernos.
E possivel criar animações 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 não amplamente suportado) ou bibliotecas de animação JavaScript como GSAP ou Framer Motion.
Qual e a diferença entre transições CSS e animações CSS?
Transições CSS animam entre dois estados quando uma propriedade muda (por exemplo, no hover). Animações CSS usam keyframes para definir sequências de multiplas etapas que podem repetir e executar independentemente. Ambas usam as mesmas funções de tempo, incluindo cubic-bezier(), para controlar o easing entre estados ou keyframes.