解決不同瀏覽器兼容性不一致導致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;
}

　　代碼有點長（動畫的代碼多），就是為了處理兼容性問題。