I want to create animation like progressbar for that I have written following code
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 1s ease infinite;
-moz-animation: progressbar 1s ease infinite;
-o-animation: progressbar 1s ease infinite;
animation: progressbar 1s ease infinite;
}
@-webkit-keyframes progressbar {
0% {
opacity: 1;
background-position: 0 0;
}
100% {
opacity: 1;
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
My problem is all animation working at same time I want to add animation one bye one after one finishes in infinite loop like progress bar. Can animation-timing-function: linear, steps(3, end); will helps? Please help me in this. Thanks
animation-delayproperty for2nd&3rddiv animation like.box:nth-child(2){animation-delay: 2s}&.box:nth-child(3){animation-delay: 3s}and fill background with:beforeOR:aftercss property. – Raeesh Alam Feb 3 at 7:26