css 动画转发不坚持在 iphone 上？

Question

我似乎在 iphone 上遇到了保持动画结束状态的问题，我的标题中的文本淡入似乎并没有保持它的结束状态，即使在添加转发时也是如此。对此有何见解？

这是CSS:

#headerwrap h1 {
    color: white;
    font-size: 70px;
    font-weight: 300;
    margin: 0;
    opacity: 1;
    letter-spacing: 3px;
    z-index: 9999;
    animation: fadeInDown 3s forwards;
    -moz-animation: fadeInDown 3s forwards; /* Firefox */
    -webkit-animation: fadeInDown 3s forwards; /* Safari and Chrome */
    -o-animation: fadeInDown 3s forwards; /* Opera */
}

这是动画关键帧

@-webkit-keyframes fadeInDown {
     0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
     }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

它解决了桌面上的问题，但是当我检查我的 iphone 时，它​​们出现动画，然后当它们完成时文本消失。

谢谢!

Answer 1

我似乎已经通过删除 transform:none 修复了它；在 100% 帧上。