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

Published October 22, 2015 by CSS Newbies.

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 #fade div fade out to nothing when it’s hovered upon:


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

By defining the parameters of the -webkit-transition property to opacity 1s linear we 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>