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

我似乎通过删除变换来修复它：无;在100％的框架上。

css动画前锋没有坚持iphone？

1 个答案: