Component中使用animation-delay的问题

一个通用的loading组件，该组件在多个page中引入，先展示loading，数据返回后隐藏，但在手机上每次animation-delay延迟的时间都和设置的不一样。

---

 测试机型：iPhone6s  系统：ios11.4

<view class='warp-box'>   <view class='loading-box' wx:if="{{ showAnimate }}">     <view></view>     <view></view>     <view></view>   </view> </view>

.warp-box {     position: fixed;     top: 0;     left: 0;     right: 0;     bottom: 0;     margin: auto;     background: #fff; } .loading-box {     position: absolute;     top: 50%;     left: 50%;     transform: translate3d(-50%, -50%, 0); } .loading-box>view {     width: 24rpx;     height: 24rpx;     background: #0ebd0c;     display: inline-block;     margin: 8rpx;     border-radius: 50%;     animation: ball-pulse-sync .6s infinite ease-in-out; } .loading-box>view:nth-of-type(1) {     animation-delay: 0.2s; } .loading-box>view:nth-of-type(2) {     animation-delay: 0.1s; } .loading-box>view:nth-of-type(3) {     animation-delay: 0s; } @keyframes ball-pulse-sync {     0% {         transform: translateY(100%)     }     50% {         transform: translateY(-100%)     }     100% {         transform: translateY(100%)     } }