manual de referência CSS

CSS @regras (RULES)

大全 de propriedades CSS

CSS cubic-bezier() function

Online Example

Different transition effects from start to end at different speeds:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>　
div {
　　largura:　100px;
　　height:　100px;
　　background: red;
　　transition: width　2s;
　　transition-timing-função:　cubic-bezier(0.1,　0.7,　1.0,　0.1);
}
div:hover {
　　largura:300px;
}
</style>
</head>
<body>
<h1>cubic-função bezier()</h1>
<p>Mova o mouse sobre o elemento div para ver o efeito.</p>
<div></div>
<p><b>Atenção:</b>Internet Explorer　9　e versões mais antigas do navegador não suportam esse efeito.</p>
</body>
</html>

Teste e veja ‹/›

Definição e uso

cubic-A função bezier() define uma curva de Bézier (Cubic Bezier).

A curva de Bézier é definida por quatro pontos P0, P1，P2 e P3 definição. P0 e P3 é o ponto de partida e o ponto de chegada da curva. P0 é (0,0) e representa o tempo inicial e o estado inicial, P3é (1,1）e representa o tempo final e o estado final.

Do gráfico acima precisamos saber que o cubic-O intervalo de valores da bezier:

P0：Valor padrão (0,　0)
P1：Valor dinâmico (x1,　y1)
P2：Valor dinâmico (x2,　y2)
P3：Valor padrão (1,　1)

Precisamos nos concentrar em P1 e P2 os valores dos dois pontos, e o intervalo de valores do eixo X é de 0 a 1，quando o valor estiver fora do intervalo, cubic-bezier não funcionará; o valor do eixo Y não é especificado, claro, nem precisa ser muito grande.

A compreensão mais direta é que, será colocado uma linha reta dentro do intervalo apenas 1 no eixo das coordenadas, e tirar dois pontos para puxar (o intervalo de valores do eixo X é [0, 1]，eixo Y qualquer），a curva resultante é a curva de velocidade da animação.

cubic-bezier() pode ser usado para animation-timing-function 　e transition-timing-function Atributo.

Versão de suporte: CSS3

Compatibilidade do navegador

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

função
cubic-bezier()	4.0	10.0	4.0	3.1	10.5

Sintaxe CSS

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

Valor	Descrição
x1,y1,x2,y2	É obrigatório. Valor numérico, x1 e x2 Deve ser de 0 a 1 do número.

Função CSS

Regra @charset do CSS Funções CSS