Exemplo
Um efeito de transição com a mesma velocidade do início ao fim:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
Tente você mesmo " Definição e Uso
A propriedade-timing-função de transição especifica a curva de velocidade do efeito de transição.
Esta propriedade permite um efeito de transição para mudar a velocidade ao longo de sua duração.
| Valor padrão: | ease |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.transitionTimingFunction="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 | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26,0 4.0 -webkit- | 10.0 | 16,0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10,5 -o- |
CSS Syntax
transition-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;Valores de propriedade
| Valor | Descrição |
|---|---|
| ease | Valor padrão. Especifica um efeito de transição com um início lento, em seguida, rápido, então termine lentamente (equivalent to cubic-bezier(0.25,0.1,0.25,1) ) |
| linear | Especifica um efeito de transição com a mesma velocidade do início ao fim (equivalent to cubic-bezier(0,0,1,1) ) |
| ease-in | Especifica um efeito de transição com um início lento (equivalente a cubic-bezier(0.42,0,1,1) ) |
| ease-out | Especifica um efeito de transição com um final lento (equivalente a cubic-bezier(0,0,0.58,1) ) |
| ease-in-out | Especifica um efeito de transição com um início lento e no final (equivalente a cubic-bezier(0.42,0,0.58,1) ) |
| 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 nos exemplos abaixo para entender como ele funciona!
mais Exemplos
Exemplo
Para entender melhor os diferentes valores da função: Aqui estão cinco elementos div diferentes com cinco valores diferentes:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard
syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Tente você mesmo " Exemplo
O mesmo que no exemplo acima, mas as curvas de velocidade são especificados com a função cúbica-Bezier:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS3 Transitions
Referência HTML DOM: transitionTimingFunction property