html - 使用css创建线加载动画

Question

嘿，我在 2px 实线上尝试过从中心到末端填充白色的动画，但失败了，因为它只是从右到左填充，而不是从反向获得。
任何人都可以告诉我如何创建像这样工作的动画:
这只是结构。 2px的高度和100px的宽度正好从+点开始，从中心到两端等长从左右填充颜色，完成这种类型的动画。希望我已经详细解释了我的问题。

[----------+----------]
[---------+++---------]
[--------+++++--------]
[-------+++++++-------]
[------+++++++++------]
[-----+++++++++++-----]
[----+++++++++++++----]
[---+++++++++++++++---]
[--+++++++++++++++++--]
[-+++++++++++++++++++-]
[+++++++++++++++++++++]

Answer 1

像下面这样:

.line {
  width:100px;
  height:2px;
  background:linear-gradient(red 0 0) center/0% 100% no-repeat;
  animation:l 2s linear infinite alternate;
}

@keyframes l {
  to {background-size:100% 100%}
}

<div class="line"></div>