解决不同浏览器兼容性不一致导致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) scale(1.1,0.9);
    }
    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) scale(1.1,0.9);
    }
    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) scale(1.1,0.9);
    }
    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) scale(1.1,0.9);
    }
    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) scale(1.1,0.9);
    }
    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;
}

　　代码有点长（动画的代码多），就是为了处理兼容性问题。

　

　　

转载于:https://www.cnblogs.com/mayiaction/p/10718020.html