O que é um cubic-bezier?

Uma curva definida por 4 valores de controlo — usada em transições e animações CSS para controlar a taxa de alteração ao longo do tempo. O 'ease' do browser é cubic-bezier(0.25, 0.1, 0.25, 1).

Quando a curva de easing excede 0 ou 1 (valores y de controlo 1), a animação 'salta' além dos seus pontos finais. Útil para UIs dinâmicas.

Existem predefinições?

Sim — predefinições comuns (linear, ease, ease-in, ease-out, ease-in-out) e algumas curvas personalizadas populares.

O editor é gratuito?

Sim — totalmente gratuito, sem necessidade de registo.

Cor e Design

Editor de Cubic Bezier

Editor cubic-bezier gratuito. Crie curvas de easing CSS visualmente com alças de arrasto, predefinições e pré-visualização de animação ao vivo. Copie CSS para transições e animações.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Nota do editor

Understanding · Time, but with feeling.

Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.

Perguntas frequentes

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

As pessoas também pesquisam por

Ferramentas relacionadas

More in this room.

Ver tudo em Cor e Design