html - CSS 关键帧动画适用于 Chrome 桌面但不适用于移动设备？

Question

我正在使用关键帧动画进行转换。它在桌面上完美运行，但在移动设备上表现非常奇怪。我正在我的 Macbook 上的 Chrome 和我的 iPhone X 上的 Chrome 上进行测试。另一个用户在 iPhone 上的 Safari 上发现了同样的问题。

基本上，当页面加载时，动画不会播放。延迟有效，但实际的过渡和淡入淡出不会发生。您可以在 asilhavy.com 查看它应该是什么样子(从计算机上) .它不会在加载时播放，但如果我转到新页面并选择后退按钮，它会在我滚动后播放。 太奇怪了。当我访问一个新页面后返回时，滚动条也很奇怪。

我怀疑我的代码中的其他地方可能有问题，但我不知道在哪里。关于在哪里查看的任何指示都是有帮助的。上面的链接提供了完整的代码，但这里是我现在专门为该动画准备的代码。我已经经历了一些其他的解决方案，比如设置 display: block、使用 -webkit- 和避免速记动画。

更新:通过更多调试，ios 和 safari 似乎无法正确呈现。动画在技术上正在播放，但过渡(缓和)没有跟随。它们移动，只是不顺畅。

@-webkit-keyframes slide-in {
    from { 
        -webkit-transform: translateX(-150%);    
        transform: translateX(-150%);   
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
@keyframes slide-in {
    from {  
        transform: translateX(-150%);     
    }
    to {
        transform: translateX(-50%);
    }
}
        .land-cont {
            overflow: hidden;
            position: absolute;
            top: 30px;
            left: 0;
            height: 80px;
            width: 250px;
        }
        .reveal-cont {
            transform: translateX(-150%);
            
            -webkit-animation-duration: 0.6s;
            -webkit-animation-timing-function: ease;
            -webkit-animation-delay: 1.6s;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-direction: normal;
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-play-state: running;
            -webkit-animation-name: slide-in;
            
            animation-duration: 0.6s;
            animation-timing-function: ease;
            animation-delay: 1.6s;
            animation-iteration-count: 1;
            animation-direction: normal;
            animation-fill-mode: forwards;
            animation-play-state: running;
            animation-name: slide-in;
            
            display: block;
            
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            top: calc(50% - 50px);
            background: rgb(32, 6, 6);
            left: 50%;
            z-index: 2;
            color: #FFF;
            z-index: 2;
            background: -webkit-linear-gradient($gradient);
            background: -o-linear-gradient($gradient);
            background: linear-gradient($gradient);
            -webkit-box-shadow: $shadow;
            -moz-box-shadow: $shadow;
            box-shadow: $shadow;
            opacity: 1;
        }

            <div class="land-cont">
                <div class="reveal-cont">
                    <h2>Alicia</h2>
                </div>
            </div>

Answer 1

终于解决了。我不能指出一个确切的变化，但我知道 this question是最终让它发挥作用的人。原来问题出在 iOS 和 Safari，而不是 Chrome。以下是我所做的更改列表:

• 正确使用-webkit-
• 没有使用速记动画
• 使用的显示: block
• 在页面加载后添加动画类

我不确定为什么最后一个有效，但它修复了它。如果有人知道它为什么有效，请告诉我。