Home / Free Stuff / Fade In / Fade Out with CSS Transition

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;
}


 

2 thoughts on “Fade In / Fade Out with CSS Transition”

  1. Pingback: Make effective CSS3 animation

  2. Pingback: Animation with CSS3 transform

Leave a Comment

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