用css3的animation keyframe写动画的时候，在pc和安卓正常，在ios上有问题，求解答

Question

其实就是让一个箭头图片让他上下移动，在ios上上下移动距离很小，而且位置也偏移到下面了，代码如下

            .arrow{
                position:absolute;
                width:0.92rem;
                height:0.3rem;
                bottom: 0.8rem;
                left:35%;
                animation: updown 1.5s ease infinite alternate;
            }
            @keyframes updown{
                from{
                    bottom:0.8rem;
                    /*transform: translateY(0.15rem);*/
                }
                to{
                    bottom:0.6rem;
                    /*transform: translateY(0);*/
                }
            }

Answer 1

最近也遇到这个问题，怀疑是ios上webkit浏览器都有的问题，ios上firefox浏览器也表现正常。
情况是首页加载的keyframes动画，使用了rem单位，有时候会异常（感觉像是keyframes计算ram时获取根节点字体大小不正确，导致的距离缩短）。

解决方法
使用setTimeout(fn,0),利用js单线程的特性，将加载动画class放在线程最后执行，从而使动画表现正常。
代码如下：

setTimeout(() => {
    $("#id").addClass("animation")
}, 0)

Answer 2

添加上旧版本的兼容写法

Answer 3

加个 -webkit

.arrow{
    position:absolute;
    width:0.92rem;
    height:0.3rem;
    bottom: 0.8rem;
    left:35%;
    animation: updown 1.5s ease infinite alternate;
    -webkit-animation: updown 1.5s ease infinite alternate;
}
@-webkit-keyframes updown

你可以试一下我的demo

-webkit-animation: bounce 2s ease-in-out infinite;
@-webkit-keyframes bounce {
    0%,
    100%,
    20%,
    53%,
    80% {
        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, .050, .855, .060);
        animation-timing-function: cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, .050, .855, .060);
        animation-timing-function: cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

Answer 4

.arrow{

position:absolute;
width:0.92rem;
height:0.3rem;
bottom: 0.8rem;
left:35%;
 -webkit-animation: updown 1.5s ease infinite alternate;
-mos-animation: updown 1.5s ease infinite alternate;
 -o-animation: updown 1.5s ease infinite alternate;
animation: updown 1.5s ease infinite alternate;

}

Answer 5

记得 做兼容

-webkit-animation: updown 1.5s ease infinite alternate;
-mos-animation: updown 1.5s ease infinite alternate;
-o-animation: updown 1.5s ease infinite alternate;
animation: updown 1.5s ease infinite alternate;

Answer 6

过了一年才看到这个问题，ios上依然没有统一，我也遇到过坑，解决办法是：位移的动画用相对位移做，比如：
from{transform:translate(0,0)}to{transform:translate(0,0.2rem)}

Answer 7

没有苹果手机，无法测试