Question

Curious to find out I am able to implement the following webkit-animation into non-webkit browser, such as Firefox, Internet Explorer and Opera? What would the coding be?

@-webkit-keyframes FadeIn {
   0% {
    opacity:0;
      }
   100% {
    opacity:1;
      }
}

.object {
    -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 3s;
}

Answer 1

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

IE does not support the CSS3 Transitions. More advices from here