Transition CSS3

[Cr4cko 1.160]

Bom, vou passar algo à vocês que eu sempre uso.

Parei de usar jquery para diversas coisas no meu site.

Efeito fade, e qualquer tipo de transições com os efeitos :hover, :focus, etc.

CSS3 está ai para deixar o seu site mais clean e rapido.

 

Com o Transition, podemos adicionar efeitos sem a necessidade de javascript ou flash.

 

O efeito transition você pode instancia-lo da seguinte forma:

 

1 - Vamos criar um botão no css

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Vamos testar?

Veja o exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Explicação completa (por Dotfile)

 

transition-delay: Determina a partir de quanto tempo a transição irá iniciar que o padrão é 0.

 

transition-duration: Duração do efeito em segundos que se não me engano por padrão é 0 também.

 

transition-property: Nome da propriedade CSS a qual o efeito da transição vai ser aplicado (border, background, etc)

 

transition-timing-function: Forma como se comporta o ritmo da transição que podem ser linear, ease, ease-in, ease-out e ease-in-out e tem um tipo de forma que você pode manipular (só procurar na internet).

 

e por fim a:

 

transition: Forma resumida que agrupa as outras 4 propriedades.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

OBS: A ordem não interfere no resultado.

 

Você pode ler mais a respeito no seguinte link

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Qualquer dúvida, só postar aqui que eu respondo!

Abraços

[.alvejado 6]

Obrigado, não sei css então tenho que pegar da net, vlw cara vou usar esse

[rnxn 2]

Dá uma atualizada ai, faz tempo que não é necessário usar vendor prefixes.

Vê ai:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

O mesmo vale border-radius:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

LOL

[Cr4cko 1.160]

Dá uma atualizada ai, faz tempo que não é necessário usar vendor prefixes.

Vê ai:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

O mesmo vale border-radius:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

LOL

Obrigado @rnxn pela informação, eu não estava sabendo dessa..

Eu não utilizo muito isso, pois sempre desenvolvo utilizando google chrome como navegador padrão..

Mas não sabia dessa.. valeu!

Abraços

[rnxn 2]

Sem problemas, quando tiver uma dúvida sobre compatibilidade de uma propriedade veja no site

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

quais browsers a suportam.

[Dotfile 0]

Não gostei do tópico devido a falta da explicação da propriedade em si.

[Cr4cko 1.160]

Adicionei uma rapida explicação. Mas já tinha uma explicação dentro das tags code.

Só o exemplo já explica facilmente como funciona a propriedade Transition.

É um elemento que pode mudar o efeito dos estilos, sem a necessidade de flash/javascript.

Mas obrigado pela critica, vê se está bom a edição..

Abraços!

[Dotfile 0]

Pensei em algo do tipo:

 

transition-delay: Determina a partir de quanto tempo a transição irá iniciar que o padrão é 0.

 

transition-duration: Duração do efeito em segundos que se não me engano por padrão é 0 também.

 

transition-property: Nome da propriedade CSS a qual o efeito da transição vai ser aplicado (border, background, etc)

 

transition-timing-function: Forma como se comporta o ritmo da transição que podem ser linear, ease, ease-in, ease-out e ease-in-out e tem um tipo de forma que você pode manipular (só procurar na internet).

 

e por fim a:

 

transition: Forma resumida que agrupa as outras 4 propriedades.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

OBS: A ordem não interfere no resultado.

 

Você pode ler mais a respeito no seguinte link

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[Cr4cko 1.160]

Dotfile, adicionei sua explicação mais completa ao topico.

Obrigado pela ajuda,

Abraços!