プログレスバーを作成し、css3トランジションを使用して塗りつぶししようとしています。リニアグラジエントを使用したCSS3トランジションでの不思議な動作
jsfiddle here
私はそれを固定サイズを与えた場合、それはいつものように動作しますが、問題は、私はbackground-size:100%を設定するとフィルはストレッチとなっています。
background-size:100%を使用して塗りつぶし効果を作成するにはどうすればよいですか？
progressBar1のが
Progressbar2 widthとbackground-size固定されている100％widthとbackground-size
/* 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>