animation动画效果(兼容各个浏览器)的模板

animation动画效果(兼容各个浏览器)的模板

1.目前来说最新版的几个大厂浏览器都已经支持animation，但是不乏很多人依然在用老版的浏览器，所以还是需要进行动画适配的。

2.具体支持版本如下：

浏览器	适配animation最低版本，不需前缀	需要添加前缀的版本，前缀
谷歌Chrome	43.0	4.0，-webkit-
Safari	9.0
火狐Firefox	16.0	5.0，-moz-
欧朋Opera	30.0	12.0，-o-；15.0，-webkit-
IE	10.0	8.0，-ms-

3.举例如下：

.classname{
animation:test 2s linear infinite;
-webkit-animation:test 2s linear alternate ;/*Webkit内核的浏览器（如 Safari、Chrome）*/
-moz-animation:test 2s linear alternate ;/*gecko内核的浏览器（如 Firefox）*/
-o-animation:test 2s linear alternate ;/*Opera 浏览器*/
-ms-animation:test 2s linear alternate ;/*IE8+*/
}
@keyframes test{
0%   {}
100% {}
    }
@-webkit-keyframes test{
0%   {}
100% {}
    }
@-moz-keyframes test{
0%   {}
100% {}
    }
@-o-keyframes test{
0%   {}
100% {}
    }
@-ms-keyframes test{
0%   {}
100% {}
    }
      

分享从不妥协，代码改变世界。

 ​