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% {}
    }
      

分享從不妥協，代碼改變世界。

 ​