css - CSS3 webkit动画的交叉兼容浏览器编码？

Question

好奇地发现我能够在webkit-animation非 webkit 浏览器中实现以下功能，例如 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:  

歌剧。

Internet Explorer 不支持同样的

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