1. Home
  2. CSS3 propriedade-timing-função de transição

O melhor tutorial CSS3 propriedade-timing-função de transição em 2024. Neste tutorial você pode aprender Exemplos,Suporte a navegadores,Atributo definições e instruções,gramática,mais exemplos,Exemplos,Exemplos,

CSS3 propriedade-timing-função de transição

Exemplos

Transições na mesma velocidade do início ao fim:

transition-timing-function: linear;
-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

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

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!

Exemplos

mais exemplos


Exemplos

Para entender melhor a função de valores diferentes: Há cinco elementos div diferentes, com cinco valores diferentes:

#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;}
/* 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:

#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);}
/* 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 »

Tutoriais quentes

Contact US

CSS3 propriedade-timing-função de transição
10/30