Fade In / Fade Out with CSS Transition

It is easy to make fade in / fade out effect with pure CSS, means no need to any JavaScript or jQuery. But this fade in/out effect only working in latest browsers only, here is the list of the supported WebKit browsers:

Browsers list:

  1. Chrome 1.0
  2. Firefox(Gecko) 4.0(2)
  3. Internet Explorer 10
  4. Opera 10.5
  5. Safari (WebKit) 3.2

To make it all browser compatible you have to use jQuery or JavaScript, in jQuery it is simple with the fadein() and fadeout() function. There are few transition property that we are using in this fade in / out effect.

List of CSS Transition Properties:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

In this example we are using these four properties, that produce the effect on mouseover. As you can see in this example i have used different transition property and transition duration for different browser so that the fade in / fade out effect remain on the above browsers. Here is the HTML and the CSS part, blow you can also find the live demo.

<div id="container">
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Portfoilo</li>
        <li>Servies</li>
        <li>Contact Us</li>
    </ul>
</div>

 

#container{
width: 200px;
}
#container ul{
list-style: none;
}
#container li{
font-family: Verdana;
font-size: 13px;
height: 35px;
line-height: 35px;
display: block;
transition-property: background, color;
transition-duration: 1s;
transition-timing-function: ease-out;
-webkit-transition-property: background, color;
-webkit-transition-duration: 1s;
-moz-transition-property: background, color;
-moz-transition-duration: 1s;
-ms-transition-property: background, color;
-ms-transition-duration: 1s;
-o-transition-property: background, color;
-o-transition-duration: 1s;
background: #fff;
color: #333;
font-weight: bold;
padding: 0 10px;
}
#container li:hover{
transition-property: background, color;
transition-duration: 1s;
transition-timing-function: ease-out;
-webkit-transition-property: background, color;
-webkit-transition-duration: 1s;
-moz-transition-property: background, color;
-moz-transition-duration: 1s;
-ms-transition-property: background, color;
-ms-transition-duration: 1s;
-o-transition-property: background, color;
-o-transition-duration: 1s;
background: #71A571;
color: #fff;
}


 

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.