CSS3 propriedade-timing-função de transição
Exemplos
Transições na mesma velocidade do início ao fim:
-webkit-transition-timing-function: linear; /* Safari and Chrome */
tente »
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
属性 | |||||
---|---|---|---|---|---|
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- |
Atributo definições e instruções
propriedade-timing-função de transição especifica uma velocidade de efeito de transição.
Esta propriedade permite um efeito de transição para alterar a velocidade da sua duração.
padrão: | facilidade |
---|---|
herança: | não |
versão: | CSS3 |
sintaxe JavaScript: | objeto .style.transitionTimingFunction = "linear" |
gramática
valor | descrição |
---|---|
linear | Disposições na mesma velocidade para iniciar as extremidades efeito de transição (igual cúbico-bezier (0,0,1,1)). |
facilidade | Provisão início lento, em seguida, mais rápido, em seguida, mais lento final efeitos de transição (cúbico-bezier (0.25,0.1,0.25,1)). |
ease-in | Disposições transitórias para o efeito de um início lento (igual ao cúbico-bezier (0.42,0,1,1)). |
ease-out | As provisões para o fim dos efeitos de transição lenta (equivalente cúbico-bezier (0,0,0.58,1)). |
aliviar-in-out | Disposições transitórias em vigor começa lenta e extremidades (igual cúbico-bezier (0.42,0,0.58,1)). |
cúbico-Bezier (N, N,N, N) | Você define seus próprios valores na função cúbica-bezier. valor possível é um número entre 0-1. |
Dica: Experimente os diferentes valores nos exemplos abaixo para entender como ele funciona!
mais exemplos
Exemplos
Para entender melhor a função de valores diferentes: Há cinco elementos div diferentes, com cinco valores diferentes:
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#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;}
tente »
Exemplos
E o exemplo acima, mas especifica a curva de velocidade função de Bezier cúbica:
#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);}
/* Safari */
#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);}
tente »