用css3的@keyframes里設置transform:rotate(); 當控制動畫暫停:animation-play-state:paused暫停,在微信和safari里無效

　　 用css3動畫 @keyframes里設置transform:rotate(); 控制動畫暫停和運動可以用屬性:animation-play-state:paused(暫停)|running(運動);但是有個讓人吐血的問題,不管我怎么調加什么兼容前綴,在微信和safari里設置paused無效,在QQ里是正常的

當@keyframes里不用transform的時候(如:@keyframes{from{width:100px}to{width:200px}),設置寬高背景等等都是沒問題的,然后就想到了一個很笨的解決方法:

將圖片改為序列圖,以關鍵幀的形式創建動畫,這樣設置animation-play-state就有效了,css代碼如下:

　　

.animate{
    -webkit-animation:move 2s steps(15) infinite;
    animation: move 2s steps(15) infinite;
    -moz-animation: move 100ms steps(15) infinite;/*序列圖有16張*/
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@-webkit-keyframes change{
    0%{-webkit-transform:rotate(0deg)}
    50%{-webkit-transform:rotate(180deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@keyframes change {
    0%{transform:rotate(0deg)}
    50%{transform:rotate(180deg)}
    100%{transform:rotate(360deg)}
}
@-moz-keyframes change{
    0%{-moz-transform:rotate(0deg)}
    50%{-moz-transform:rotate(180deg)}
    100%{-moz-transform:rotate(360deg)}
}
@-webkit-keyframes move{
    0%{background-position-y:-0px}
    100%{background-position-y:-600px}
}
@keyframes move {
    0%{background-position-y:-0px}
    100%{background-position-y:-600px}
}
@-moz-keyframes move{
    0%{background-position-y:-0px}
    100%{background-position-y:-600px}
}

js控制暫停播放代碼:

 var flag = 0;//初始時音樂為暫停狀態
        $('#music').click(function(){
            if(flag==0){
                $('#audio').get(0).play();
                $('.music').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});
                $('.musicMask').hide();
                flag=1;
            }else if(flag==1){
                $('#audio').get(0).pause();
//                $('.music').removeClass('animate');
                $('.music').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});
                $('.musicMask').show();
                flag=0;
            }
        })