Css3 Fade In A Div

[random1]

I'm trying to fade in a div using CSS3 only. The CSS code I currently have written is:

 

@-webkit-keyframes FadeIn
{
0%
{
 opacity:0;
}
100%
{
 opacity:1;
}
}
#example
{
-webkit-animation-name:FadeIn;
-webkit-animation-timing-function:ease-in;
-webkit-animation-duration:2s;
}

 

This fades works in Google Chrome but not in Firefox, Internet Explorer or Opera (as I expect).

 

How can expand on this code using CSS3 code to support Firefox, Internet Explorer and Opera etc?

Edited October 19, 2012 by random1

[random1]

Update:

 

After more work and research I have the code:

 

@-webkit-keyframes FadeIn
{
   0%
   {
    opacity:0;
   }
   100%
  {
    opacity:1;
   }
}
@-webkit-keyframes FadeOut
{
   0%
   {
    opacity:1;
   }
   100%
  {
    opacity:0;
   }
}
@-moz-keyframes FadeIn
{
 from { opacity:0; } to { opacity:1; }
}
@-moz-keyframes FadeOut
{
 from { opacity:1; } to { opacity:0; }
}
@-o-keyframes FadeIn
{
 from { opacity:0; } to { opacity:1; }
}
@-o-keyframes FadeOut
{
 from { opacity:1; } to { opacity:0; }
}
@keyframes FadeIn
{
 from { opacity:0; } to { opacity:1; }
}
@keyframes FadeOut
{
 from { opacity:1; } to { opacity:0; }
}
#example
{
-webkit-animation:FadeIn ease-in 0.5s;
-moz-animation:FadeIn ease-in 0.5s;
-o-animation:FadeIn ease-in 0.5s;
animation:FadeIn ease-in 0.5s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}

 

and its working all but Internet Explorer. Any advice?

[Guber-X]

IE does not support the CSS3 Transitions. Reference from http://www.w3schools.com/css3/css3_transitions.asp