Efeito fade com CSS3

Houve um tempo em que a única maneira de fazer aparecer ou desaparecer um elemento ou imagem com suavidade era usando JavaScript / jQuery. Com CSS3, você pode facilmente criar um efeito de fade com nada mais do que um pouco de CSS. 


Vamos começar com um elemento de texto (HTML):

<p class="fade">Este é o elemento que vai desaparecer quando você passar o mouse sobre ele</p>

Agora com (CSS):

 .fade {

      opacity: 1;
      transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
     }

     .fade:hover {
      opacity: 0.5;
     }

Passe o mouse sobre o texto abaixo para ver a demonstração: 


Este é o meu elemento de texto que vai desaparecer quando você passa o mouse sobre ele.
Vamos fazer a mesma coisa com uma imagem:

Podemos usá-lo também para alterar uma cor de fundo. Vamos criar um menu simples, usando uma lista simples (HTML):

<ul class="nav-fade">  <li>Home</li>  <li>Quem Somos</li>   <li>Contato</li> </ul>
Novamente o (CSS):

.nav-fade li {background: #fff; padding: 5px 10px; display: inline-block; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out;color:#000;  }


.nav-fade li:hover { background: #ddd; }
Confira o resultado abaixo:

• Home
• Quem Somos
• Contato

Como você pode ver, com esse recurso CSS3 você pode usar para uma infinidade de aplicações. 

Se tiver alguma dúvida ou sugestão não deixe de comentar, se gostou compartilhe.