使用線性漸變的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>