用于 CSS3 webkit 动画的跨兼容浏览器编码

Question

想知道我能够在非webkit浏览器中实现以下webkit-animation，例如Firefox，Internet Explorer和Opera？编码会是什么？

@-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 不支持 CSS3 转换。更多建议来自这里

Answer 2

猜你可以使用

-moz-animation: 

对于 Mozilla 和

-o-animation:  

对于歌剧。

IE浏览器不支持相同的

您可以查看此链接以获取更多信息 http://www.w3schools.com/css3/css3_animations.asp