Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Editor de curvas cubic-bezier CSS
Ajuste dois pontos de controle, teste uma transição e gere uma função de aceleração cubic-bezier.
X fica entre 0 e 1; Y pode ultrapassar esse intervalo. Arraste ou use as setas, com Shift para passos maiores.
CSS
Sobre a ferramenta
Acerte a aceleração ou a ultrapassagem do destino de uma transição observando a curva.
Como usar
Escolha uma curva predefinida, arraste os pontos ou digite X1, Y1, X2 e Y2. As setas também ajustam os pontos, e Shift amplia o passo. Defina a duração da prévia, inicie ou pare a reprodução e copie ou baixe o CSS.
X aceita valores de 0 a 1 e Y de −2 a 3, permitindo antecipação e ultrapassagem do ponto final. A exportação traz apenas a declaração de aceleração, sem duração ou animação completa. Se o sistema estiver configurado para reduzir movimento, a reprodução é desativada, mas edição e exportação continuam disponíveis.
Perguntas frequentes
A exportação contém uma animação completa?
Apenas transition-timing-function. Configure duração e propriedades animadas na folha de estilos. x vai de 0 a 1; y, de −2 a 3.
Por que Reproduzir não mostra movimento mesmo com uma curva válida?
A prévia respeita a preferência de redução de movimento do sistema. Quando ela está ativada, a animação de deslocamento não é reproduzida, mas a curva continua disponível para edição e exportação. Caso contrário, confira se a duração está entre 100 e 5.000 ms. Essa duração afeta apenas a prévia.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0