Question

我正在使用使用css关键帧的animate.css库（https://github.com/daneden/animate.css）。

这一切都完美适用于桌面浏览器，但在ios safari上它根本不会动画，只是跳到最后一帧。示例如下：

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

对于ios safari上的其他人来说，这是一样的吗？我很惊讶地发现在搜索后没有提到这个，所以也许我做错了。

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

$("#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

刚刚注意到今天看到我的网站bounceInUp不是在我的iPhone 6 Plus上工作了。[...]

我添加了＆＃39; -webkit-transform-origin：0 0;＆＃39; to BounceInLeft：0％{ 不透明度：0; -webkit-transform-origin：0 0; -webkit-transform：translate3d（-3000px，0,0）; transform：translate3d（-3000px，0,0）;动画有效。

格式化代码：

-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);
}

在ios safari上动画css

1 个答案: