safari animation-play-state:pause失效的大坑

为了更好的控制动画，想要使用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正确。

如果你知道原因，请留言交流，共同学习共同进步，谢谢！