[英]Is there a better way to achieve this CSS animation without Javascript?
Just experimenting with a loading bar. 只是尝试加载栏。 The primary issue is, once each bar is done with its iteration, it needs to start again on top of the last bar. 主要问题是,一旦每个小节都完成了迭代,就需要在最后一个小节的顶部重新开始。 I did this via some hacky JS but maybe there's a more clever way to do it using pure CSS? 我是通过一些骇人听闻的JS做到的,但是也许有更聪明的方法使用纯CSS做到这一点?
HTML HTML
<div class="loading-bar">
<div class="bar"><div class="bar-inner"></div></div>
<div class="bar"><div class="bar-inner"></div></div>
</div>
SCSS SCSS
.loading-bar {
clear: both;
height: 12px;
width: 100%;
position: relative;
.bar {
margin: 0 auto;
height: 12px;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 0;
.bar-inner {
margin: 0 auto;
width: 0;
height: 12px;
-webkit-animation-name: loadbars;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
&:nth-child(1) .bar-inner {
background: gray;
}
&:nth-child(2) .bar-inner {
background: blue;
-webkit-animation-delay: 0.5s;
}
}
}
@-webkit-keyframes loadbars {
0% { width: 0; }
50% { width: 100%; }
100% { width: 100%; }
}
JS JS
var bars = $(".bar-inner");
var zindex = 1;
var listener = function () {
zindex++;
$(this).parent().css("z-index", zindex);
};
bars.on("webkitAnimationIteration", listener);
Demo: http://jsfiddle.net/18uqrtxo/ 演示: http : //jsfiddle.net/18uqrtxo/
I've updated the demo to show pure CSS with 4 bars, just for fun. 我已经更新了演示,以显示带有4条的纯CSS,只是为了好玩。
http://jsfiddle.net/18uqrtxo/2/ http://jsfiddle.net/18uqrtxo/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.