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过渡。来自here

的更多建议

Answer 2

猜猜你可以用

-moz-animation:

对于mozilla和

-o-animation:

歌剧

Internet Explorer不支持相同的

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

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

2 个答案: