Exemplo
Reproduzir uma animação com a mesma velocidade do início ao fim:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A-timing-function animação especifica a curva de velocidade de uma animação.
A curva de velocidade define o tempo de uma animação usa para mudar de um conjunto de estilos CSS para outro.
A curva de velocidade é usado para fazer as mudanças sem problemas.
| Valor padrão: | ease |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.animationTimingFunction="linear" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43,0 4.0 -webkit- | 10.0 | 16,0 5.0 -moz- | 9 4.0 -webkit- | 30,0 15,0 -webkit- 12,0 -o- |
CSS Syntax
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit; A-timing-function animação usa uma função matemática, chamado de curva de Bezier cúbica, para fazer a curva de velocidade. Você pode usar seus próprios valores nesta função, ou usar um dos valores pré-definidos:
Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| linear | A animação tem a mesma velocidade do início ao fim | Jogue " |
| ease | Valor padrão. A animação tem um início lento, em seguida, rapidamente, antes de terminar lentamente | Jogue " |
| ease-in | A animação tem um início lento | Jogue " |
| ease-out | A animação tem um fim lento | Jogue " |
| ease-in-out | A animação tem tanto um começo lento e um final lento | Jogue " |
| step-start | Equivalente a steps(1, start) | |
| step-end | Equivalente a steps(1, end) | |
| steps(int,start|end) | Especifica uma função do piso, com dois parâmetros. O primeiro parâmetro especifica o número de intervalos na função. Deve ser um número inteiro positivo (greater than 0) . O segundo parâmetro, que é opcional, é o valor "start" ou "end" , e especifica o ponto em que a alteração de ocorrer valores dentro do intervalo. Se o segundo parâmetro for omitido, é dado o valor "end" | |
| cubic-bezier( n , n , n , n ) | Definir os seus próprios valores na função cúbica-bezier Os valores possíveis são os valores numéricos de 0 a 1 | |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Tip: Experimente os diferentes valores na você mesmo seção Experimente abaixo.
mais Exemplos
Exemplo
Para entender melhor os diferentes valores da função de temporização;
Aqui estão cinco diferentes <div> elementos com cinco valores diferentes:
/* For Chrome, Safari and Opera */
#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;}
/* Standard
syntax */
#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;}
Tente você mesmo " Exemplo
O mesmo que no exemplo acima, mas as curvas de velocidade são definidos com a função cúbica-Bezier:
/* For Chrome, Safari and Opera */
#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);}
/* Standard syntax */
#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);} Tente você mesmo " Páginas relacionadas
Tutorial CSS3: CSS3 animações
Referência HTML DOM: animationTimingFunction property