Seltsames Verhalten in CSS3-Übergang mit linearem Farbverlauf

Question

Ich versuche, einen Fortschrittsbalken zu machen und CSS3-Übergang verwenden, um es einen Fülleffekt zu geben.

jsfiddle here

Wenn ich es eine feste Größe geben, es funktioniert wie gewohnt, aber Problem ist, wenn ich die background-size:100% legen Sie die Füllung strecken wird.

Wie kann ich einen Fülleffekt mit background-size:100% erstellen?

ProgressBar1 mit width befestigt ist und background-size

Progressbar2 ist mit 100% und widthbackground-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>