Editor de cubic-bezier

Como usar o editor de cubic-bezier

1. Arrasta as duas pegas no gráfico. P1 (o primeiro ponto de controlo) molda o início do movimento e P2 o fim. O tempo corre da esquerda para a direita e o progresso de baixo para cima.
2. Ou escreve um valor em Valor cubic-bezier(): um cubic-bezier(0.4, 0, 0.2, 1) completo, quatro números ou uma palavra-chave como ease-in-out. Os campos x1, y1, x2 e y2 editam uma coordenada de cada vez.
3. Parte do menu Predefinições (palavras-chave CSS, as famílias de Sine a Back e as curvas do Material Design) ou dos botões de palavras-chave. Quando a tua curva coincide com uma predefinição, o nome aparece ao lado dos botões.
4. Observa a Pré-visualização da animação: o ponto de A tua curva e o ponto de linear percorrem a mesma distância na mesma Duração. Usa Pausa/Reproduzir e Recomeçar para os comparar.
5. Copia o resultado em Função de temporização CSS, ou copia a Aproximação linear() e escolhe o seu número de Segmentos.

Teclado: seleciona uma pega e usa as setas para a mover 0,01, ou 0,1 com Shift.

Se o teu sistema estiver configurado para reduzir o movimento, a animação começa em pausa. Carrega em Reproduzir se a quiseres ver na mesma.

O que significa cubic-bezier()

Uma função de easing CSS faz corresponder o tempo decorrido de uma transição (0 a 1) ao seu progresso (0 a 1). cubic-bezier(x1, y1, x2, y2) descreve esta correspondência com uma curva de Bézier cúbica que começa em (0, 0), termina em (1, 1) e é puxada por dois pontos de controlo, P1 = (x1, y1) e P2 = (x2, y2).

• Os valores x são tempos e têm de ficar entre 0 e 1; caso contrário, a função não seria uma curva de temporização válida. O editor mantém-nos dentro desse intervalo.
• Os valores y são progresso e podem ir abaixo de 0 ou acima de 1. Um y acima de 1 faz a animação ultrapassar o destino e voltar atrás, como as curvas Back; abaixo de 0, começa por andar para trás.
• Uma inclinação acentuada significa movimento rápido, uma inclinação suave movimento lento. ease-out começa rápido e acaba devagar, o que parece natural para elementos que entram no ecrã. ease-in faz o contrário e adequa-se a elementos que saem.

As palavras-chave CSS são atalhos: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) e linear = (0, 0, 1, 1).

A aproximação linear()

A função mais recente linear() enumera valores de progresso em tempos igualmente espaçados, por exemplo linear(0, 0.25, 0.5, 0.75, 1), e une-os com segmentos de reta. A ferramenta amostra a tua curva (resolve a Bézier para cada passo de tempo) e escreve esses valores com três casas decimais. Com 20 a 40 segmentos, o resultado é visualmente idêntico à curva. A verdadeira vantagem de linear() está nas curvas que uma Bézier não consegue desenhar, como ressaltos e molas, mas também te permite usar uma única sintaxe. Funciona no Chrome e no Edge 113+, no Firefox 112+ e no Safari 17.2+, por isso mantém o valor cubic-bezier() como alternativa.