html - 移动设备中的纯 CSS 加载器动画

Question

美好的一天。动画是在干净的 CSS 上完成的(我知道我可以使用“请求动画框架”，但我不能使用它)。遇到这样的问题，即动画只能在桌面浏览器中运行良好。 “动画延迟”不适用于移动设备。我怎样才能在干净的 CSS 上实现这个动画？

SCSS:

.initial-loader {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;

display: flex;
justify-content: center;
align-items: center;

background: #65B200;

&_disabled {
    display: none;
}

&__wrapper {
    height: 0%;
    width: auto;

    display: flex;
    justify-content: center;
}

&__loader {
    width: 60px;
    height: 8px;
    align-self: flex-end;

    display: flex;
    justify-content: space-around;
}

&__loader span {
    height: 8px;
    width: 8px;
    background-color: white;
    border-radius: 100%;
}

&__loader :nth-child(1) {
    animation: anime 0.5s infinite ease-in-out alternate;
}

&__loader :nth-child(2) {
    animation: anime 0.5s infinite ease-in-out alternate;
    -moz-animation-delay: 120ms;
    -webkit-animation-delay: 120ms;
    -o-animation-delay: 120ms;
    animation-delay: 120ms;
}

&__loader :nth-child(3) {
    animation: anime 0.5s infinite ease-in-out alternate;
    animation-delay: 240ms;
}

&__loader :nth-child(4) {
    animation: anime 0.5s infinite ease-in-out alternate;
    animation-delay: 360ms;
}

&__loader :nth-child(5) {
    animation: anime 0.5s infinite ease-in-out alternate;
    animation-delay: 480ms;
}

@keyframes anime {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(0.2)
    }
}

HTML:

<div class="initial-loader">
        <div class="initial-loader__wrapper">
            <div class="initial-loader__loader">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
</div>

这是我的代码: https://codepen.io/koofem/pen/MWYoYxE

How does it works in the desktop browser

How does it works on mobile

Answer 1

移动设备有 webkit 浏览器，如果相同的 CSS 在桌面上运行而不在移动设备上运行，那么请确保您的 css 具有适用于所有不同浏览器和设备的前缀。

您已经为 :nth-child(2) 完成了它，但没有为所有其他选定的元素和类完成。

最好的捷径是转到 CSS Autiprefixer并通过复制粘贴您的 CSS 来试一试，然后再次尝试在移动设备上进行测试(显然是在清除移动设备浏览器的缓存之后)