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

Question

Good day. The animation was done on a clean CSS (I understand that i can use the "request animation frame", but I can't use it). Faced such a problem that the animation works well only in the desktop browser. "Animation-delay" does not work on mobile devices. How can I implement this animation on a clean 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>

Here my code: https://codepen.io/koofem/pen/MWYoYxE

How does it works in the desktop browser

How does it works on mobile

Answer 1

Mobile devices has webkit browsers, if the same CSS is working on desktops and not on Mobile Devices, then make sure your css has prefixes for all different browsers and devices.

You have had done it for :nth-child(2) but not for all other selected elements and classes.

Best shortcut is to goto CSS Autiprefixer and give it a shot by copy pasting your CSS and try to test on mobile device again (Obviously after clearing cache of the Mobile Device's Browser)