Função CSS cubic-bezier()
Exemplo
Um efeito de transição com velocidade variável do início ao fim:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definição e uso
A função cubic-bezier() define uma curva Cubic Bezier.
Uma curva de Bezier Cúbica é definida por quatro pontos P0, P1, P2 e P3. P0 e P3 são o início e o fim da curva e, no CSS, esses pontos são fixos, pois as coordenadas são razões. P0 é (0, 0) e representa o tempo inicial e o estado inicial, P3 é (1, 1) e representa o tempo final e o estado final.
A função cubic-bezier() pode ser usada com a propriedade animation-timing-function e a propriedade transition-timing-function .
Versão: | CSS3 |
---|
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a função.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Sintaxe CSS
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |