Quick Tip: How to Use CSS3 to Create a Fade Effect


With CSS3’s webkit transition property and opacity properties, it’s easy to duplicate the effects of JavaScript and jQuery with CSS.

Insert this code into the body of your html:

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

This css code will make the entire #fadediv fade out to nothing when it’s hovered upon:

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

Bydefining the parameters of the -webkit-transitionproperty to opacity 1s linearwe are defining which property is going to transition (opacity), for how long (1s) and whether or not the transition is going to change speed throughout the duration (linear). The simplicity of this code makes CSS3 a real rival to jQuery in terms of creating this sort of fade effect.