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

【问题标题】：CSS keyframes animation works on Chrome desktop but not mobile?CSS关键帧动画适用于Chrome桌面但不适用于移动设备？
【发布时间】：2020-03-07 15:49:58
【问题描述】：

我正在使用关键帧动画进行转换。它在桌面上完美运行，但在移动设备上表现得非常奇怪。我正在 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>

【问题讨论】：

标签： html css sass

【解决方案1】：

终于修好了。我不能指出一个确切的变化，但我知道this question 是最终让它工作的那个。原来问题出在 iOS 和 Safari，而不是 Chrome。以下是我所做的更改列表：

正确使用-webkit-
没有使用速记动画
使用的显示器：块
页面加载后添加动画类

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

【讨论】：