为了更好的控制动画,想要使用animation-play-state:pause开始时暂停动画播放,需要的时候移除animation-play-state:pause改为animation-play-state:running,就可以运行动画了。
其他浏览器里没有任何问题,然而在safari、微信webview里却不能使用了,简直就是缺陷!
测试如下:
使用animated.css中的zoomInDown动画效果:
animated.css播放设置:
.animated {
-webkit-animation-duration: 1s;animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
动画效果:
关键帧:@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
动画名:
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
动画暂停的css样式:
.animation_pause{
animation-play-state:paused !important;
-webkit-animation-play-state:paused !important;
}
控制播放测试代码:
假设id="reserve_window"的html元素是动画元素
那么这段控制代码按理说移除了animation_pause后,其默认状态就变成了animation-play-state:running,是可以播放的,
事实上chrome ie opera等国内浏览器,也都是能播放的,然而在不明状况下,safari却有时成功有时不成功,原因不明
$('#reserve_window').addClass('animated zoomInDown animation_pause')
setTimeout(function(){
$('#reserve_window').removeClass('animation_pause')
},500)但为了控制动画,最开始时的暂停还是要有的,
这个不能用,那就换个办法,修改animation_pause这个css类,改为:
animation-delay:2147483647s;
-webkit-animation-delay:2147483647s;
无限延迟执行动画伪装成暂停动画。需要时去掉这个延迟css类,就可以了。
不好的一点在于,这样做毕竟不是pause暂停动画,只能控制开始时候的延迟。而且存在可能消耗浏览器内存资源的可能性。
后记:
个人认为这个bug是safari内部的一种性能优化机制什么的在搞鬼,就是说,不在视区里的不渲染;或者是safari的css样式叠加计算不比chrome、ie正确。
如果你知道原因,请留言交流,共同学习共同进步,谢谢!