Exemplo
Alterar a curva de velocidade de um efeito de transição:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Tente você mesmo " Definição e Uso
A propriedade transitionTimingFunction especifica da curva de velocidade do efeito transição.
Esta propriedade permite um efeito de transição para mudar a velocidade ao longo de sua duração.
Suporte navegador
A propriedade transitionTimingFunction é suportada no Internet Explorer 10, Firefox, Opera e Chrome.
O Safari suporta uma alternativa, a propriedade WebkitTransitionTimingFunction.
Nota: A propriedade transitionTimingFunction não é suportada no Internet Explorer 9 e versões anteriores.
Sintaxe
Devolver o imóvel transitionTimingFunction:
object .style.transitionTimingFunction Defina a propriedade transitionTimingFunction:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Valores de propriedade
| Valor | Descrição |
|---|---|
| ease | Valor padrão. Especifica um efeito de transição com um arranque lento, em seguida, rapidamente, em seguida, termina-se 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 arranque lento (equivalente a cubic- bezier(0.42,0,1,1) ) |
| ease-out | Especifica um efeito de transição com uma extremidade lento (equivalente a cubic- bezier(0,0,0.58,1) ) |
| ease-in-out | Especifica um efeito de transição com um lento início e no final (equivalente a cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Definir os seus próprios valores na função cúbica-bezier. Os valores possíveis são valores numéricos de 0 a 1 |
| initial | Define essa propriedade para seu valor padrão. Leia sobre inicial |
| inherit | Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar |
Detalhes técnicos
| Valor padrão: | facilidade |
|---|---|
| Valor de retorno: | Uma corda, que representa a propriedade-sincronismo-função de transição de um elemento |
| CSS Versão | CSS3 |
Páginas relacionadas
Referência CSS: transition-timing-function property
<Estilo de objeto