用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;
}
})
用css3的@keyframes里设置transform:rotate(); 当控制动画暂停:animation-play-state:paused暂停 在微信和safari里无效...
