Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1490295377
Vida do cache: 1490554576
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML Efeitos CSS

Conhecendo a propriedade CSS3 transition

Você pode ver em vários sites, inclusive aqui no Mundo Blogger, um efeito interessante em alguns links. Normalmente, quando passamos o mouse sobre um link, algo em seu estilo muda: seja a cor, o sublinhado, uma borda, o background. E esse tal ‘efeito interessante’ consiste numa transição gradativa de um estilo para outro, como você pode conferir na demonstração abaixo:

 

 

passe o mouse!

Essa transição é alcançada por meio da propriedade CSS3 transition. Essa propriedade é suportada pelos principais navegadores (Firefox, Chrome, Opera, Safari – e reza a lenda que IEca 10 também), sendo que Chrome 24 e anteriores e Safari precisam do prefixo -webkit- para renderizar o efeito.

Sintaxe

A sintaxe da transition suporta quatro valores que podem ser definidos:

  • a propriedade afetada pela transição (como cor, background, largura, bordas etc.);
  • o tempo de duração dessa transição, em segundos (quanto tempo vai levar para o estilo ser alterado completamente);
  • a função de timing (sinceramente isso não faz a menor diferença) e
  • o tempo de atraso para a transição ser executada, também em segundos (quanto tempo demorará para a transição iniciar quando o mouse passar sobre tal elemento).

Cada um desses valores tem uma propriedade específica, mas é bem mais prático e comum que eles sejam compilados. Confira demonstração abaixo:


.transicao {
 transition-property: width; /* propriedade que sofrerá a transição */
 transition-duration: 2s; /* duração da transição */
 transition-timing-function: linear; /* timing-function */
 transition-delay: 0; /* atraso do início da transição */ 
/* agora vamos repetir toda a declaração com o prefixo -webkit- para que o efeito funcione no Chrome 24 e no Safari */
 -webkit-transition-property: width;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: linear;
 -webkit-transition-delay: 0;
}
/* ou a propriedade compilada */
.transicao {
 transition: width 2s linear 0;
 -webkit-transition: width 2s linear 0;
}

No exemplo acima, os elementos com a class ‘transicao’ terão sua largura alterada em dois segundos assim que o mouse passar sobre eles. Mas só desse jeito, nada vai funcionar.

CSS3 Transition na prática

Quando você define o estilo de um link, geralmente usa o seletor a:link e, ao definir o estilo quando o mouse estiver sobre o link, o comando é a:hover. Bem, primeiramente saiba que transition pode ser utilizado em qualquer elemento HTML, não só links (nos exemplos da demonstração, usei divs simples). E para que o efeito transition funcione corretamente, você deve definir dois blocos de estilo para o elemento; a saber, o estilo da tag/id/class normal e o estilo da tag/id/class no modo :hover. Ou seja:


tag, #id, .class {
 /* insira os estilos que você quer para o seletor */
 /* insira abaixo os comandos para transition */
}
tag:hover, #id:hover, class:hover {
 /* insira os estilos para quando o mouse estiver sobre o elemento */
 /* não é necessário repetir a declaração de transition */
}

[dica]Dica: você pode definir o mesmo estilo para vários seletores, separados por vírgulas, como eu fiz acima a título de exemplificação, mas isso não é necessário.[/dica]

Exemplos práticos

Seguem abaixo exemplos de elementos com transition com seus respectivos códigos.

[alerta]Não vou usar timing-function nesses exemplos porque não faz diferença, então o primeiro valor em segundos é a duração e o segundo é o atraso.[/alerta]

Exemplo 1

div1

/* com apenas uma propriedade */
#div1 {
 background: #bebebe;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#div1:hover {
 background: #dda0dd;
}

Exemplo 2

div2

/* com duas propriedades e atraso */
#div2 { 
background: #bebebe; 
border: 5px solid #000;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#div2:hover {
background: #dda0dd; 
border: 5px solid #68228b;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}

Exemplo 3

div3

/* com três propriedades e atraso */
#div3 { 
background-color:#bebebe;
-moz-transition-property: background-color,width;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width;
-webkit-transition-duration: 2s;-o-transition-property: background-color,border,width;
-o-transition-duration: 2s;
}
#div3:hover { 
width:300px;
background-color:#000;
color:#fff;
-moz-transition-property: background-color,width;-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width;
-o-transition-duration: 2s;color:#fff;
}

Exemplo 4

div4

/* com todas as propriedades simultaneamente */
#div4 { 
background: #bebebe; 
border: 5px solid #000; 
width: 100px; 
transition: all 2s; 
-webkit-transition: all 2s;
} 
#div4:hover { 
background: #dda0dd; 
border: 5px solid #68228d; 
width: 300px;
}

Outras dicas

  • Como você conferiu nos exemplos acima, você pode atribuir diferentes regras de transições para elementos distintos numa única regra – basta separá-los por vírgula.
  • Como também ilustrado, não é obrigatório usar as quatro propriedades numa declaração transition, mas a ordem delas deve ser SEMPRE property/duration/timing-function/delay.
  • Os valores em duration e delay devem ser expressos em segundos, mas às vezes um segundo é muito tempo para uma transição (caso dos links normais, pelo menos eu acho). É possível usar valores de segundos quebrados usando apenas um ponto, por exemplo, .5s significa meio segundo, .7s significa sete décimos de segundo e 1.2s significa um segundo e dois décimos.
  • Se você quiser usar o mesmo tempo e atraso (em suma, a mesma regra) para todas as propriedades daquele seletor, não precisa especificar um por um separados por vírgula; basta usar ‘all’ (sem aspas) ao invés de identificar a propriedade em questão.
  • Em intervalos pequenos de tempo, o timing-function da propriedade transition não dá um efeito notável, sendo mais útil apenas em animações mais avançadas. Apenas a título de curiosidade, os valores possíveis são ease (padrão, que faz a transição com um início devagar, depois fica mais rápida e termina devagar), linear (mesma velocidade de transição do início ao fim), ease-in (transição começa devagar e aumenta de velocidade), ease-out (transição começa rápida e diminui a velocidade no final) e ease-in-out (basicamente a mesma coisa de ease).
  • Declarações transition devem constar, evidentemente, no CSS. No Blogger, o CSS fica antes de ]]</b:skin>.
  • Se você for usar transition em links, tome o cuidado de incluir em TODOS os links; usar transition só em metade dos links das páginas causa um negócio esquisito e desagradável a quem visita.

 

Conclusão

Hoje você aprendeu a utilizar a propriedade CSS3 transition, que nos permite fazer um efeito estilístico simples e interessante quando passamos o mouse sobre determinado elemento. Você gostou da possibilidade? Vai implementar no seu blog? Conte para a gente!



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.

Sobre o autor | Website

Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.

5 Comentários

  1. Juliana Costa disse:

    Não entendi onde devo incluir o código.
    Por exemplo, tem como coloca naquele botão no meio do post “Continue Lendo” ?

  2. Danilo disse:

    Ola. Ótimo tópico.
    Eu gostaria de saber se tem como fazer esse mesmo efeito com 2 imagens do mesmo tamanho.
    obrigado. blw

    • Yara Georgia disse:

      Oi Danilo, muito obrigada.
      Tem como fazer com imagens sim, mas isso necessita de conhecimento em JavaScript. É bem complicadinho…

  3. Alceu disse:

    Eu queria saber se tambem e efeito de transation nas imagens do seu blog nos post aquelas que dão uma virada quando coloca o mouse em cima e se tambem e css3

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.