• 首页

  • 官方

  • 主题

  • 关注

  • 联系

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

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

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

2.具体支持版本如下:

浏览器 适配animation最低版本,不需前缀 需要添加前缀的版本,前缀
谷歌Chrome 43.0 4.0,-webkit-
Safari 9.0 4.0,-webkit-
火狐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% {}
    }
posted @ 2021-10-14 21:39  戈小戈  阅读(273)  评论(0编辑  收藏  举报