Gerador de bézier cúbico CSS

O que é realmente uma função de temporização cubic-bézier

Em CSS, uma função de temporização mapeia o tempo decorrido (a entrada, de 0 no início da animação a 1 no final) para um valor de progresso (a saída, também convencionalmente de 0 a 1 mas autorizada a ultrapassar). A propriedade animada (opacity, translate, color, qualquer coisa que CSS consiga transicionar) interpola entre o seu valor de partida e o de chegada ao ritmo que a função de temporização descreve. Temporização linear significa que a propriedade se move a velocidade constante; as várias funções ease aceleram, desaceleram ou ambas. cubic-bezier(x1, y1, x2, y2) é a forma geral: uma curva de Bézier de (0,0) a (1,1) com dois pontos de controlo livres P1 e P2 que se especificam com quatro números. O navegador amostra pontos ao longo dessa curva para determinar o progresso da propriedade em cada frame da animação. Os quatro números definem dois pontos de controlo: P1 = (x1, y1) molda o início da curva (tipicamente 0–1 em ambos os eixos), P2 = (x2, y2) molda o fim. Os valores x têm de ficar em [0, 1] para que a curva seja uma função monovaluada do tempo; os valores y podem exceder [0, 1] para produzir efeitos de ultrapassagem e ressalto (um y de 1,2 significa que a propriedade excede momentaneamente o seu valor de destino antes de se acomodar).

Curvas de Bézier, linhagem matemática

As curvas têm o nome de Pierre Bézier, um engenheiro francês na Renault que as utilizou nos anos 1960 para desenhar as linhas suaves dos painéis de carroçaria do Renault 16, publicadas em 1968 como parte do sistema CAD UNISURF da Renault. A matemática tinha sido desenvolvida independentemente alguns anos antes (1959) por Paul de Casteljau na Citroën, mas a Citroën manteve o trabalho de de Casteljau como segredo comercial e a versão publicada de Bézier tornou-se a referência canónica. Os dois homens convergiram para a mesma família de curvas polinomiais definidas por pontos de controlo, o algoritmo de de Casteljau para avaliar uma curva de Bézier num parâmetro dado tem o nome do pioneiro não publicado. As curvas de Bézier cúbicas tornaram-se a primitiva universal dos gráficos vectoriais porque são baratas de avaliar (umas multiplicações e adições), trivialmente escaláveis (a matemática é invariante sob transformações afins) e localmente controláveis (mover um ponto de controlo só muda segmentos de curva próximos). Adobe PostScript (1984) e PDF, a especificação SVG (Recomendação W3C de Setembro de 2001) e cada formato de fonte moderno usam curvas de Bézier cúbicas como o bloco de construção para letras, ícones e ilustrações. CSS adoptou o mesmo tipo de curva para a temporização de animações, emprestando a primitiva matemática padrão do mundo do design visual para o novo caso de uso de descrever movimento.

A spec CSS Animation e funções de temporização

As animações e transições CSS usam ambas a mesma família de funções de temporização. A spec CSS Animations Level 1 foi publicada pela primeira vez como Working Draft público em Março de 2009 (extraída de implementações anteriores com prefixo WebKit) e continua a ser mantida pelo W3C CSS Working Group. O módulo CSS Easing Functions Level 1 formaliza a sintaxe da função de temporização e está actualmente em Candidate Recommendation. Cinco palavras-chave nomeadas são apelidos para cubic-beziers específicos: ease = cubic-bezier(0.25, 0.1, 0.25, 1): o predefinido CSS para transições, com um início rápido e um fim lento que parece natural para a maior parte do movimento UI. ease-in = cubic-bezier(0.42, 0, 1, 1): começa lento, acelera para um fim rápido. ease-out = cubic-bezier(0, 0, 0.58, 1): início rápido, desacelera para um fim lento; é geralmente o easing mais usado para elementos UI a entrar no viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): curva em S simétrica, lenta em ambas as extremidades. linear = cubic-bezier(0, 0, 1, 1): sem easing, taxa constante; raramente a escolha certa para UI mas apropriada para animações em loop contínuo como spinners. CSS também oferece duas opções de temporização não-Bézier: steps(n, jumpterm) para animação por passos (frame a frame), e linear() (acrescentado em CSS Easing Level 2) para funções lineares por troços que aproximam qualquer curva.

Curvas de easing de sistemas de design

Os grandes sistemas de design publicam curvas de easing opinativas que sobrepõem os predefinidos CSS. Google Material Design especifica «standard easing» como cubic-bezier(0.4, 0, 0.2, 1): aceleração rápida, desaceleração lenta, usada para a maioria das transições UI no Android e na biblioteca Material da web; «decelerated easing» cubic-bezier(0, 0, 0.2, 1) para elementos a entrar no ecrã; «accelerated easing» cubic-bezier(0.4, 0, 1, 1) para elementos a sair. As Human Interface Guidelines da Apple enfatizam animações de física de mola em vez de curvas de Bézier fixas, mas o UIKit do iOS entrega um cubic-bezier predefinido de aproximadamente (0.25, 0.1, 0.25, 1) (o mesmo que ease do CSS). O Carbon Design System da IBM usa cubic-bezier(0.5, 0, 0.1, 1) para a sua categoria de movimento produtivo. Microsoft Fluent, Atlassian, Salesforce Lightning especificam todos as suas próprias curvas. As equações de easing de Robert Penner (publicadas em 2001 como parte do seu livro sobre movimento Flash) definiram o vocabulário de curvas nomeadas que quase todas as bibliotecas de animação usam, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. A maior parte pode ser expressa como cubic-beziers; as variantes elastic e bounce não podem (precisam de funções por troços multi-parte porque oscilam).

Escolher a curva certa para o trabalho

• Elementos a entrar no viewport (modais a aparecer, cartões a deslizar para dentro, dropdowns a abrir), use ease-out ou uma curva desacelerada como a do Material cubic-bezier(0, 0, 0.2, 1). O elemento desacelera ao chegar, o que se sente como se «se acomodasse no lugar».
• Elementos a sair do viewport (modais a fechar, cartões a deslizar para fora), use ease-in ou uma curva acelerada. O elemento acelera ao partir, sentindo-se como se estivesse a sair com intenção.
• Animações contínuas (loaders, barras de progresso, movimento ambiente), use linear. O easing torna o movimento contínuo aos solavancos; velocidade constante lê-se como estável.
• Estados de hover e pressões de botão: duração curta (100-150 ms) com ease-out para o hover-in e ease-in ou sem easing para o hover-out. O feedback dos botões deve sentir-se ágil.
• Movimento enfático que precisa de personalidade (notificações toast, indicadores de sucesso), use uma curva ligeiramente em ultrapassagem como cubic-bezier(0.34, 1.56, 0.64, 1) para um pequeno ressalto que sinaliza «acabou de acontecer alguma coisa interessante» sem ser irritante.
• Animações mais longas (acima de 500 ms): use ease-in-out ou uma curva em S semelhante. Animações longas com easing unilateral parecem ter um início ou fim mal formado.

Considerações de desempenho

Funções de temporização cubic-bezier personalizadas não custam essencialmente nada em tempo de execução, a curva é uma constante, os navegadores pré-calculam a tabela de lookup uma vez, e a avaliação por frame são umas operações de vírgula flutuante. A questão de desempenho é qual a propriedade que se anima, não a curva de temporização. Animar transform (translate, scale, rotate) e opacity usa composição GPU e mantém-se fluido a 60 ou 120 fps mesmo em hardware de gama média. Animar top, left, width, height, margin, padding, ou qualquer propriedade que dispare layout vai fazer engasgar tudo excepto as páginas mais simples porque cada frame dispara um reflow completo. A lista de propriedades «compositor-friendly» (transform + opacity, mais filter e algumas outras) é o conjunto seguro habitual; tudo o resto precisa de ser testado sob a carga real da página. A propriedade CSS will-change sugere ao navegador que uma propriedade vai animar, deixando-o pré-promover o elemento à sua própria camada de composição; use com moderação porque cada will-change reserva memória GPU.

Acessibilidade: prefers-reduced-motion

Uma minoria significativa de utilizadores (aqueles com perturbações vestibulares, condições de défice de atenção, ou simples preferência pessoal) acham o design de movimento distractivo ou activamente desconfortável. A spec CSS Media Queries Level 5 define a media feature prefers-reduced-motion, exposta como definição de sistema em macOS (Definições do Sistema → Acessibilidade → Ecrã → Reduzir movimento), Windows 10+ (Definições → Acessibilidade → Ecrã), iOS, Android e a maioria dos principais ambientes de trabalho Linux. A convenção desde cerca de 2019: envolver qualquer animação não essencial em @media (prefers-reduced-motion: no-preference) { ... } ou inverter com @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. A escolha de curva cubic-bezier não importa para isto, a spec pede ao programador que desactive ou encurte substancialmente a animação quando o utilizador exprimiu a preferência. A documentação moderna dos sistemas de design (Material, Atlassian, GOV.UK) inclui toda orientação sobre movimento reduzido.

Física de mola, a alternativa mais recente

As funções de temporização cubic-bezier descrevem o movimento como uma interpolação de duração fixa ao longo de uma curva afinada à mão. A física de mola descreve o movimento como o assentamento natural de um oscilador harmónico amortecido: especifica massa, rigidez e amortecimento, e a animação corre até a mola estar em repouso. As molas sentem-se mais naturais para gestos UI interrompíveis porque têm momentum que se prolonga através das interrupções, ao soltar um gesto de flick a meio voo, a mola continua até ao seu destino numa nova curva em vez de estalar. O iOS da Apple usa física de mola para a maioria das interacções nativas (o ressalto de uma scroll view nas extremidades, o efeito de elástico de um swipe). React Spring (Paul Henschel), Framer Motion e a função de easing CSS linear() (quando alimentada com uma curva de mola amostrada) trazem semântica de mola para a web. As cubic-beziers continuam a ser a ferramenta certa para transições UI de duração fixa; as molas são a ferramenta certa para movimento conduzido por gesto, interrompível. Este editor produz cubic-beziers, a forma certa para 90 % do trabalho de animação UI em 2026.

Quando vai recorrer a esta ferramenta

• Desenhar uma animação nova ao feeling. Arraste os pontos de controlo até a bola de pré-visualização se mover como quer, depois copie o CSS. Mais rápido do que escrever quatro números e refrescar a página.
• Igualar uma animação de outro produto. Faça engenharia reversa do timing de uma animação que viu noutro lado ajustando até a pré-visualização corresponder à sua memória.
• Construir uma biblioteca de movimento de marca. Decida-se por três ou quatro cubic-beziers específicos para «rápido», «suave», «enfático», «ressalto» e aplique-os consistentemente ao longo do produto.
• Rever a spec de animação de um designer. Cole os valores cubic-bezier de uma spec de movimento Figma, veja se a curva produz o movimento que o designer descreveu.
• Passagem engenheiro-designer. Um designer arrasta a curva certa nesta ferramenta, copia o CSS e cola-o numa mensagem do Slack, sinal muito mais alto do que um vago «torna-o mais saltitante».

Perguntas frequentes

O que os valores representam ?

Definem os dois pontos de controlo de uma curva de Bézier cúbica de (0,0) a (1,1). P1 = (x1, y1) molda o início da curva; P2 = (x2, y2) molda o fim. O eixo x é o tempo (tem de estar em [0, 1]); o eixo y é o progresso da animação (pode exceder [0, 1] para efeitos de ultrapassagem). y > 1 significa que a propriedade excede momentaneamente o seu valor de destino antes de se acomodar; y < 0 significa que a propriedade se move brevemente na direcção errada antes de se aproximar do alvo.

Qual é o easing CSS predefinido?

Para transições CSS (transition: opacity 300ms;) o predefinido é ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1): início rápido, fim lento. Para animações CSS (animation: foo 1s;) o predefinido é também ease. Sobreponha com transition-timing-function ou animation-timing-function. Para a maior parte do movimento UI, a variante ease-out ou uma curva desacelerada estilo Material produz resultados com melhor sensação do que o predefinido.

Como faço um efeito saltitante ou de ultrapassagem?

Empurre y2 acima de 1 (valores típicos 1,2–1,6) para que a curva exceda brevemente o destino antes de se acomodar. Um pequeno ressalto comum é cubic-bezier(0.34, 1.56, 0.64, 1). Para ressaltos pronunciados vai querer física de mola ou animação multi-keyframe em vez de um único cubic-bezier, as curvas de Bézier só podem ter um pico, por isso o verdadeiro ressalto (oscilações múltiplas) requer keyframes em passos intermédios.

As curvas personalizadas são mais lentas do que as palavras-chave nomeadas?

Não, as palavras-chave nomeadas são apelidos para cubic-beziers específicos, avaliados pelo mesmo caminho de código. O desempenho depende de qual a propriedade que se anima (transform/opacity = composto GPU e rápido; propriedades que afectam layout como top/left/width = lentas devido ao reflow), não da curva de temporização. O custo de avaliação cubic-bezier é desprezível.

Esta ferramenta funciona offline?

Sim, o canvas da curva, a animação da bola de pré-visualização e a geração de código CSS, todos correm inteiramente no seu navegador via JavaScript. Sem chamadas de rede durante o uso. Ponha a página offline (modo de avião) após o carregamento e o editor continua a funcionar. Sem telemetria; os valores de curva nos quais se assentou nunca saem do seu dispositivo.

Ferramentas relacionadas