Consejo rápido: cómo usar CSS3 para crear un efecto de desvanecimiento

Con la propiedad de transición del webkit de CSS3 y las propiedades de opacidad, es fácil duplicar los efectos de JavaScript y jQuery con CSS.

Inserte este código en el cuerpo de su html:

1	<div id="fade">Hover over this text to see it fade away</div>

Este código CSS hará que todo el div #fade se desvanezca a nada cuando se cierne sobre:

1 2 3 4 4 5 5 6 6 7 7

#fade{   opacity: 1;   -webkit-transition: opacity 1s linear; } #fade:hover{   opacity: 0; }

Al definir los parámetros de la  propiedad -webkit-transition a opacidad 1s lineal  , estamos definiendo qué propiedad va a hacer la transición (opacidad), durante cuánto tiempo (1s) y si la transición cambiará o no la velocidad a lo largo de la duración (lineal ) La simplicidad de este código hace que CSS3 sea un verdadero rival para jQuery en términos de crear este tipo de efecto de desvanecimiento.