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

【问题标题】：Strange behaviour in CSS3 transition with linear gradient具有线性渐变的 CSS3 过渡中的奇怪行为
【发布时间】：2016-04-25 21:22:20
【问题描述】：

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

jsfiddle here

当我给它一个固定大小时，它像往常一样工作，但问题是当我设置background-size:100% 时，填充变得拉伸。

如何使用background-size:100%创建填充效果？

Progressbar1 带有固定的width 和background-size

Progressbar2 为 100% width 和 background-size

【问题讨论】：

标签： html css css-transitions linear-gradients

【解决方案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>

【讨论】：