Recomendação de curso:

Função cubic-bezier() do CSS

Definição e uso do CSS cubic-bezier() A função é usada para definir a curva cúbica tridimensional.

A curva cúbica tridimensional é definida por quatro pontos P0, P1, P2 e P3. No CSS, P0 e P3 são o ponto de início e fim da curva, e as coordenadas desses pontos são taxas fixas. P0 é (0, 0), representando o tempo e estado inicial; P3 é (1, 1), representando o tempo e estado final.

cubic-bezier() A função pode ser usada com animation-timing-function Atributo e transition-timing-function Atributos juntos.

Exemplo

Exemplo 1

Um efeito de transição de velocidade variável de início a fim:

div {
  largura: 100px;
  altura: 100px;
  fundo: vermelho;
  transition: largura 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Experimente você mesmo

Exemplo 2

Exiba elementos <div> com diferentes valores de velocidade de curva cúbica tridimensional:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Experimente você mesmo

Sintaxe do CSS

cubic-bezier(x1,y1,x2,y2)

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Páginas relacionadas

Referência:Propriedade animation-timing-function CSS

Referência:Propriedade transition-timing-function do CSS