具有线性渐变的CSS3过渡中的奇怪行为

Question

我正在尝试制作一个进度条，并使用css3过渡给它填充效果。

jsfiddle 在这里

当我给它一个固定的大小时，它照常工作，但是问题是当我将background-size:100%设置为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>