使用CSS3制作像Ant Design这样的动画进度条

Question

我正在尝试创建一个动画进度栏，类似于在Ant Design中找到的进度栏：https://ant.design/components/progress/

这是一张图片：

我能做的最好的是：

.progress {
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    height: 10px;
    border-radius: 10px;
    background-color: #ecf0f1;
}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    transition: width 0.6s ease;
    background-color: dodgerblue;
}
.progress-bar-animated {
    background-image: linear-gradient(to right, transparent 33%, rgba(255, 255, 255, 0.3) 50%, transparent 66%);
    background-size: 300% 100%;
    animation: progress-bar-shine 2s infinite;
}
@keyframes progress-bar-shine {
    0% {
        background-position: right;    
    }
}

<div style="width: 300px">  
  <div class="progress">
    <div class="progress-bar progress-bar-animated" style="width: 50%" role="progressbar"></div>
  </div>
</div>

它非常相似，但是放大后可以看到两个动画之间的差异。我需要进行哪些调整才能使我的产品更像Ant Design？

请注意，我不是在问如何舍入右侧的栏。我问的是从一侧到另一侧的白光。

Answer 1

似乎是结合了不透明度淡入淡出的宽度动画：

.progress {
    display: flex;
    overflow: hidden;
    height: 30px;
    border-radius: 50px;
    background-color: #ecf0f1;
}
.progress-bar {
    overflow: hidden;
    text-align: center;
    border-radius:inherit;
    background-color: dodgerblue;
}
.progress-bar-animated {
  position:relative;
}
.progress-bar-animated::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:inherit;
    background:linear-gradient(to right,transparent,rgba(255, 255, 255, 0.7));
    transform:translateX(-100%);
    animation: progress-bar-shine 2s infinite;
}
@keyframes progress-bar-shine {
    to {
      transform:translateX(0);
      opacity:0.1;
    }
}

<div style="width: 400px">  
  <div class="progress">
    <div class="progress-bar progress-bar-animated" style="width: 50%" role="progressbar"></div>
  </div>
</div>