Странное поведение в переходе 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>