CSS3 propriedade-timing-function animação
Exemplos
Do início ao fim com a mesma velocidade reproduzir a animação:
-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
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:
#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:
#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
