使用线性渐变的CSS3转换中的奇怪行为

Question

我想制作一个进度条并使用css3转换为其赋予填充效果。

的jsfiddle here

当我给它一个固定的大小，它的工作原理像往常一样，但问题是，当我设置background-size:100%填充变得拉伸。

如何使用background-size:100%创建填充效果？

Progressbar1与固定width和background-size

Progressbar2是用100％width和background-size

Answer 1

/* PROGRESS */ 
 
.progress { 
 
    background-color: #e5e9eb; 
 
    height: 0.25em; 
 
    position: relative; 
 
    width: 24em; 
 
} 
 
.progress-bar { 
 
    animation-duration: 3s; 
 
    animation-name: width; 
 
    background-image: repeating-linear-gradient(to right, transparent, #000 50px, #fff 100px, transparent 150px); 
 
    background-size: 24em 0.25em; 
 
    height: 100%; 
 
    position: relative; 
 
    width:100% 
 
} 
 

 
.progress2 { 
 
    background-color: #e5e9eb; 
 
    height: 0.25em; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.progress-bar2 { 
 
    animation-duration: 3s; 
 
    animation-name: width; 
 
    background-image: repeating-linear-gradient(to right, transparent, #000 50px, #fff 100px, transparent 150px); 
 
    background-size: 100% 0.25em; 
 
    height: 100%; 
 
    position: relative; 
 
    width:100% 
 
} 
 

 
/* ANIMATIONS */ 
 
@keyframes width { 
 
    0%, 100% { 
 
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); 
 
    } 
 
    0% { 
 
    width: 0%; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
}

<div class="progress"> 
 
    <div class="progress-bar"> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="progress2"> 
 
    <div class="progress-bar2"> 
 
    </div> 
 
</div>