解决不同浏览器兼容性不一致导致css的animation不起效
最近项目中,需要把APP的纯html5的项目显示在一个移动的广告屏上边,广告屏是基于安卓系统的,浏览器不清楚什么版本,直接使用css的animation是不支持的。
有一个页面是通过animation实现页面的图片的跳动,结果浏览器不支持,刚开始使用js解决(结果js解决由于水平不够导致效果不好,而且还会弹出白色的块,电脑浏览器都不会出现这个,就这个广告屏出现,真的恶心)
无奈之下,只能让浏览器去兼容css的animation。
一开始页面的css代码是这样的
@keyframes rotate { 0%{ transform: translateY(0); } 25%{ transform: translateY(-10px); } 50%{ transform: translateY(-20px); } 75%{ transform: translateY(-10px); } 100%{ transform: translateY(0); } } .active{ animation:rotate 1s linear infinite; }
这段代码就是让图片不停地上下跳动跳动,有兴趣的可以复制下来找张图片玩玩,不能兼容项目需要的浏览器,需要修改为
@-webkit-keyframes rotate { 0%{ -webkit-transform: translateY(0); } 25%{ -webkit-transform: translateY(-2vmin); } 50%{ -webkit-transform: translateY(-4vmin); } 75%{ -webkit-transform: translateY(-2vmin); } 100%{ -webkit-transform: translateY(0); } } @-o-keyframes rotate { 0%{ -webkit-transform: translateY(0); } 25%{ -webkit-transform: translateY(-2vmin); } 50%{ -webkit-transform: translateY(-4vmin); } 75%{ -webkit-transform: translateY(-2vmin); } 100%{ -webkit-transform: translateY(0); } } @-moz-keyframes rotate { 0%{ -webkit-transform: translateY(0); } 25%{ -webkit-transform: translateY(-2vmin); } 50%{ -webkit-transform: translateY(-4vmin); } 75%{ -webkit-transform: translateY(-2vmin); } 100%{ -webkit-transform: translateY(0); } } @keyframes rotate { 0%{ -webkit-transform: translateY(0); } 25%{ -webkit-transform: translateY(-2vmin); } 50%{ -webkit-transform: translateY(-4vmin); } 75%{ -webkit-transform: translateY(-2vmin); } 100%{ -webkit-transform: translateY(0); } } .active{ -webkit-animation:rotate 1s linear infinite; -o-animation:rotate 1s linear infinite; -moz-animation:rotate 1s linear infinite; animation:rotate 1s linear infinite; }
代码有点长(动画的代码多),就是为了处理兼容性问题。