Gerador de cubic-bezier: arraste uma curva de easing e copie o CSS | We.Inc
Arraste duas alças para moldar uma curva de easing cubic-bezier(), coloque-a para correr contra linear e ease, comece pelas palavras-chave da especificação ou pelos presets do Tailwind e copie o CSS ou uma classe Tailwind.
Uma curva de easing cubic-bezier(x1, y1, x2, y2) vai de 0,0 a 1,1 e é curvada por dois pontos de controle. Os dois valores x precisam ficar entre 0 e 1, senão o navegador descarta a declaração inteira, enquanto os valores y podem ficar abaixo de 0 ou acima de 1 para ultrapassar o alvo. Arraste as alças abaixo e veja os pontos correrem.
As palavras-chave de easing do CSS como valores cubic-bezier() (CSS Easing Functions Level 1)
Palavra-chave
Valor cubic-bezier()
Sensação
cubic-bezier(0, 0, 1, 1)
Velocidade constante, mecânica
ease (o padrão)
cubic-bezier(0.25, 0.1, 0.25, 1)
Início rápido, parada longa e suave
cubic-bezier(0.42, 0, 1, 1)
Início lento, parada brusca
cubic-bezier(0, 0, 0.58, 1)
Início rápido, pouso suave
cubic-bezier(0.42, 0, 0.58, 1)
Suave nas duas pontas
Digitar quatro números e tentar adivinhar como vão parecer raramente funciona. Aqui você molda a curva com a mão, vê os números se atualizarem e compara o movimento lado a lado com uma linha reta e com o padrão do navegador antes de colar qualquer coisa na sua folha de estilos.
Arraste as alças azul e rosa no gráfico, ou digite números exatos nos quatro campos. Os campos x ficam limitados ao intervalo de 0 a 1.
Aperte Reproduzir para mandar três pontos pela pista ao mesmo tempo: a sua curva, linear e ease.
Escolha um preset para começar pelas palavras-chave da especificação, pelos padrões do Tailwind ou por uma das nossas curvas com overshoot.
Copie a declaração CSS ou a classe arbitrária do Tailwind.
Use ease-out para elementos que entram na tela e ease-in para os que saem. Elementos que se movem entre dois pontos visíveis costumam ficar melhores com ease-in-out.
Um y1 acima de 1 faz o movimento passar do alvo e voltar. Mantenha o overshoot pequeno em movimentos de interface, por volta de 1.2 a 1.6.
Durações curtas escondem as diferenças entre curvas. Avalie uma curva com 600 milissegundos ou mais e depois encurte.
Respeite quem pede menos movimento: envolva movimentos grandes em @media (prefers-reduced-motion: no-preference).
Perguntas frequentes
O que significam os quatro números em cubic-bezier()?
São as coordenadas dos dois pontos de controle: x1 e y1 do primeiro, x2 e y2 do segundo. O eixo x é a fração da duração que já passou e o eixo y é quanto o valor animado já avançou.
Por que meu cubic-bezier é ignorado?
Se algum valor x for menor que 0 ou maior que 1, a função é inválida e o navegador descarta a declaração, voltando ao valor que se aplicava antes. Confira se x1 e x2 estão entre 0 e 1.
O ease-in e o ease-out do Tailwind são iguais às palavras-chave do CSS?
Não. O tema padrão do Tailwind define ease-in como cubic-bezier(0.4, 0, 1, 1), ease-out como cubic-bezier(0, 0, 0.2, 1) e ease-in-out como cubic-bezier(0.4, 0, 0.2, 1), que são diferentes das palavras-chave do CSS com o mesmo nome. Os dois conjuntos estão nos presets do editor para você comparar.
Como uso uma curva personalizada no Tailwind?
Escreva o valor entre colchetes sem espaços, por exemplo ease-[cubic-bezier(0.34,1.56,0.64,1)]. Para reutilizá-lo, declare uma variável de tema como --ease-springy em @theme e o Tailwind cria uma classe ease-springy.
Uma curva bezier consegue fazer um quique com vários saltos?
Não. Uma curva cúbica pode ultrapassar o alvo uma vez e voltar, mas não consegue quicar várias vezes. Para um quique com vários saltos, use @keyframes com várias etapas ou a função linear(), mais recente, que aceita uma lista de pontos.
Como ler o gráfico
O tempo corre da esquerda para a direita e o progresso de baixo para cima. Um trecho íngreme da curva significa movimento rápido, um trecho plano significa que o elemento quase não se mexe. A linha de canto a canto é o movimento linear.
Alças acima da borda superior ou abaixo da borda inferior empurram o progresso além de 100 por cento ou abaixo de 0 por cento por um instante. É assim que você consegue um overshoot suave sem escrever keyframes.
Onde a curva entra no CSS
O mesmo valor funciona em transition-timing-function, animation-timing-function e nos atalhos transition e animation. Dentro de @keyframes, uma timing function definida em um keyframe vale apenas para o trecho até o próximo keyframe.
Algumas propriedades não podem ficar abaixo de zero, como opacity ou uma largura. Se uma curva passar abaixo de 0, esses valores são limitados, então a descida simplesmente não aparece.
Valores dos presets
Os cinco primeiros vêm da especificação CSS Easing Functions. As linhas do Tailwind são o tema padrão desse framework. As linhas de overshoot são pontos de partida que ajustamos no olho.
Todos os presets do editor
Nome
Origem
Valor
Palavra-chave CSS
cubic-bezier(0, 0, 1, 1)
Palavra-chave CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Palavra-chave CSS
cubic-bezier(0.42, 0, 1, 1)
Palavra-chave CSS
cubic-bezier(0, 0, 0.58, 1)
Palavra-chave CSS
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Padrão do Tailwind
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Padrão do Tailwind
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Padrão do Tailwind
cubic-bezier(0.4, 0, 0.2, 1)
saída elástica
Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)
Overshoot
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Overshoot
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Usando uma curva personalizada
Card com overshoot no hover
Passe o mouse sobre o card. Ele sobe um pouco além do ponto de repouso e se acomoda, tudo graças à timing function.
Tailwind: classe avulsa e um token de tema reutilizável
A forma com colchetes não aceita espaços. A variável em @theme transforma a curva em uma classe com nome.
Editor de curva de easing
Arraste as alças ou digite valores, aperte Reproduzir para colocar sua curva para correr contra linear e ease e depois copie o CSS ou a classe Tailwind.
Palavra-chave CSS
Palavra-chave CSS
Palavra-chave CSS
Palavra-chave CSS
Palavra-chave CSS
Padrão do Tailwind
Padrão do Tailwind
Padrão do Tailwind
Overshoot
Overshoot
Overshoot
Gráfico da curva de easing. Arraste as duas alças para mudar a curva.
Primeiro ponto de controle
Segundo ponto de controle
Presets de easing
Duração: {n} ms
Reproduzir
Sua curva
Copiar CSS
Copiar classe Tailwind
Esta curva é igual à palavra-chave CSS {v}.
Os valores x ficam entre 0 e 1. Os valores y podem ultrapassar.