CSS旋转器动画显示后停止无

Question

我有一个spinner loader，只有在页面加载和显示后才会旋转。inline-block 由javascript实现。之后，当显示时，旋转器不再旋转了 inline-block 与javascript。这种情况发生在手机上的Safari上，spinner在CSS中没有显示。

我在互联网上搜索了很多，但我无法找到解决方案。谁能帮帮我？

CSS。

    @-webkit-keyframes loader-spinner {
    0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
    }
    @-moz-keyframes loader-spinner {
    0% {
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
    -moz-transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
    }
    @-ms-keyframes loader-spinner {
    0% {
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
    -ms-transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
    }
    @keyframes loader-spinner {
    0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
    }
    .loader-spinner {
    display: none;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    background-color: rgba(255,255,255,0.5);
    opacity: 1;
    z-index: 99;
    position: absolute;
    transition: opacity linear 0.1s; 
    }   
    .loader-spinner::before {
    -webkit-animation: 2s linear infinite loader-spinner;
    -moz-animation: 2s linear infinite loader-spinner;
    -ms-animation: 2s linear infinite loader-spinner;
    -o-animation: 2s linear infinite loader-spinner;
    animation: 2s linear infinite loader-spinner;
    border: solid 3px #eee;
    border-bottom-color: #EF6565;
    border-radius: 50%;
    content: "";
    height: 40px;
    left: 50%;
    opacity: inherit;
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    width: 40px;
    will-change: transform;
    }

Answer 1

.container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: #eee;
}
.container:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.container .spinner-frame {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 5px solid #fff;
    padding: 10px;
}
.container .spinner-frame .spinner-cover {
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.container .spinner-frame .spinner-bar {
    background: #29d;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0;
    -webkit-animation: spinny 2s linear infinite;
    transform-origin: 100% 100%;
}
@-webkit-keyframes spinny {
    0% {
        transform: rotate(0deg);
        background: #29d;
    }
    50% {
        transform: rotate(180deg);
        background: #00427c;
    }
    100% {
        transform: rotate(360deg);
        background: #29d;
    }
}

<div class="container"> <!--There's the container that centers it-->
    <div class="spinner-frame"> <!--The background-->
        <div class="spinner-cover"></div> <!--The Foreground-->
        <div class="spinner-bar"></div> <!--and The Spinny thing-->
    </div>
</div>

你可以试试这个很酷的加载器，更多的信息你可以参考这篇博客文章。使用CSS创建一个加载旋转器

干杯！