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

美好的一天。动画是在干净的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：

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

How does it works in the desktop browser

How does it works on mobile

移动设备具有Webkit浏览器，如果同一CSS在台式机上而不是在移动设备上运行，则请确保您的CSS具有所有不同浏览器和设备的前缀。

您已经为：nth-​​child（2）完成了此操作，但尚未为所有其他选定的元素和类完成此操作。

最好的快捷方式是转到CSS Autiprefixer，然后通过复制粘贴CSS尝试一下，然后尝试再次在移动设备上进行测试（显然是在清除了移动设备浏览器的缓存之后）