用 jpreloader.js 旋转 css 动画

Question

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

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

我做了一个fiddle整个预加载，附上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所以我觉得应该指定在seconds

正在查看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，希望对您有所帮助。

用 jpreloader.js 旋转 css 动画

Spin css anim with jpreloader.js

jquery

css

css-animations