jquery - 使用 jpreloader.js 旋转 css 动画

Question

我使用 jpreloader.js 预加载页面。我想运行我的彩色旋转圆圈而不是脚本动画...但是我的 css 动画不起作用。

我想这样做:http://ref.topictimes.com/videos/tech/how-to-create-a-custom-preloading-screen-full-blHZ6zCYvMM.html

我搞砸了整个预加载，附上 jpreloader.js :http://jsfiddle.net/igorlaszlo/dy0snxvr/

与此同时，我检查了 css 动画是否因为 jquery 脚本而不起作用，但是当我只尝试动画本身时，结果相同，它不起作用:http://jsfiddle.net/igorlaszlo/n1L961dw/1/

css动画的代码:

HTML

<div id="overlay">    
    <div id="loader"></div>    
</div>

CSS

#overlay {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:98;
background: #303636;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-moz-keyframes spin {
    0% {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
#loader {
    display:block;
    position:relative;
    left:50%;
    top:50%;
    width:150px;
    height:150px;
    margin:-75px 0 0 -75px;
    border:3px solid transparent;
    border-top-color:#3498db;
    -webkit-border-radius:50%;
    border-radius:50%;
    -webkit-animation:spin 2% linear infinite;
    -moz-animation:spin 2% linear infinite;
    animation:spin 2% linear infinite;
    z-index:100;
}
#loader:before {
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    border:3px solid transparent;
    border-top-color:#e74c3c;
    -webkit-border-radius:50%;
    border-radius:50%;
    -webkit-animation:spin 3% linear infinite;
    -moz-animation:spin 3% linear infinite;
    animation:spin 3% linear infinite;
}
#loader:after {
    content:"";
    position:absolute;
    top:15px;
    left:15px;
    right:15px;
    bottom:15px;
    border:3px solid transparent;
    border-top-color:#f9c922;
    -webkit-border-radius:50%;
    border-radius:50%;
    -webkit-animation:spin 1.5% linear infinite;
    -moz-animation:spin 1.5% linear infinite;
    animation:spin 1.5% linear infinite;
}

我的 CSS 动画有什么问题？

Answer 1

我认为您的 CSS 中有些地方不太好:

animation:spin 1.5% linear infinite; <-- check + also see the prefixed ones

1.5% 应该是 1.5s 而不是 %，它代表 time 所以我认为应该以秒

为单位指定

看着 animation shorthand 属性:

Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

检查 demo here 希望对您有所帮助。