O melhor tutorial CSS3 propriedade-timing-function animação em 2024. Neste tutorial você pode aprender
Exemplos,Suporte a navegadores,definições e instruções tag,gramática,exemplos on-line,Exemplos,Exemplos,artigos relacionados,
CSS3 propriedade-timing-function animação
Exemplos
Do início ao fim com a mesma velocidade reproduzir a animação:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
tente » Na parte inferior desta página para mais exemplos.
Suporte a navegadores
属性 |
|
|
|
|
|
animation-timing-function |
43.0 4.0 -webkit- |
10.0 |
16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
definições e instruções tag
Como animação-timing-function Especifica a animação vai completar um ciclo.
filmes de definição da curva de velocidade de uma folha de estilo CSS em um outro período de tempo definido.
curva de velocidade é usado para alterar mais suave.
padrão: | facilidade |
---|
herança: | não |
---|
versão: | CSS3 |
---|
sintaxe JavaScript: | objeto object.style.animationTimingFunction = "linear" |
---|
gramática
animation-timing-function:value;
Funções matemáticas-timing-function animação uso, chamado de curva de Bezier cúbica, a curva de velocidade. Com esta função, você pode usar seus próprios valores, ou usar um dos valores pré-definidos:
valor | descrição | teste |
---|
linear | velocidade da animação do começo ao fim é o mesmo. | teste |
facilidade | Padrão. Anime começou em baixa velocidade, em seguida, acelerar, desacelerar no final. | teste |
ease-in | Animação começa em baixa velocidade. | teste |
ease-out | Animação em baixa fim. | teste |
aliviar-in-out | início de animação e fim em baixa velocidade. | teste |
cúbico-Bezier (N, N,N, N) | Na função cúbica-bezier em seus próprios valores. Os valores possíveis são de 0-1 valores. | |
Dica: Tente a função de "experimentar" após usar um valor diferente.
exemplos on-line
Exemplos
Para entender melhor os diferentes valores da função de temporização, é fornecido um conjunto de cinco valores diferentes de cinco elementos div diferentes:
/* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
tente » Exemplos
O mesmo que no exemplo anterior, mas é definido pela função cúbica-Bezier curva de velocidade:
/* W3C and Opera: */
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
tente »
artigos relacionados
tutorial CSS3: CSS3 Animação