使用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>