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-
未使用速记动画
使用的显示：阻止
页面加载后添加了动画类

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

CSS关键帧动画可以在Chrome桌面上运行，但不能在移动设备上运行吗？

1 个答案: