jquery - ios safari 上的 CSS 动画

Question

我正在使用 animate.css 库 ( https://github.com/daneden/animate.css )，它使用 css 关键帧。

它在桌面浏览器上完美运行，但在 ios safari 上它根本不会动画，只是跳到最后一帧。示例在这里:

https://liger.vm.bytemark.co.uk/animatetest/

ios safari 上的其他人也一样吗？在四处搜索后，我很惊讶地发现没有其他人提到这一点，所以也许我做错了什么。

奇怪的是，如果在某种点击事件之后将动画 css 类添加到带有 jquery 的元素中，它在 ios safari 中工作正常，例如:

$("#givebutton").click(function(){
    $("#givebutton").addClass('animated bounceOutDown');
});

即当动画没有在文档就绪或窗口加载时发生。我通过添加延迟尝试了窗口负载情况的解决方法:

$(document).ready(function(){
//same behaviour with: $(window).load(function(){

    window.setTimeout(function(){

        $("#givebutton").addClass('animated bounceInUp');

    }, 1000);

});

同样，这在桌面上运行良好，但在 ios safari 上仍然完全没有动画。

Answer 1

根据问题所在的插件问题。

引自:https://github.com/daneden/animate.css/issues/472

Just noticed looking at the my site today that bounceInUp is not working anymore on my iPhone 6 Plus.[...]

---

I have added ' -webkit-transform-origin: 0 0;' to bounceInLeft: 0% { opacity: 0; -webkit-transform-origin: 0 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } and the animation worked.

格式化代码:

-webkit-transform-origin: 0 0;' to bounceInLeft:
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}