Javascript 从中心到中心的CSS转换

我有一些水平线，使用

div

元素制作。所有这些动画都使用CSS设置过渡，使用JS设置新的

宽度。以下是我当前的代码和结果：

HTML:

JS:

var horizontalLines=document.getElementsByClassName（“水平线”）
对于（var hLines=0；hLines

结果:

这里的问题是线条从左侧开始设置动画。就像有一个
transform origin
属性一样，除了转换/动画之外，我还有其他方法可以做同样的事情吗？我希望能够将线条设置为从中心开始向外展开。
如果只使用一个元素和渐变背景，然后在不使用JS的情况下设置背景大小的动画，那么更简单的解决方案是什么


.box{
高度：200px；
背景图像：线性梯度（rgba（0,0,0,0.2）30%，透明30%）；
背景尺寸：0%20px；
背景位置：50%0；
背景重复：重复-y；
动画：动画2向前；
}
@关键帧动画{
从{
背景尺寸：0%20px；
}
到{
背景尺寸：100%20px；
}
}
页边距：自动
将为您提供所需的中间过渡：

.lines-horizontal {
  position: relative;
  width: 0%;
  transition: width 2s;
  height: 5px;
  background-color: black;
  opacity: 0.2;
  z-index: -5;
  margin: 0px auto 10px auto;
}


.lines-horizontal {
  position: relative;
  width: 0%;
  transition: width 2s;
  height: 5px;
  background-color: black;
  opacity: 0.2;
  z-index: -5;
  margin-bottom: 10px;
}

var horizontalLines = document.getElementsByClassName("lines-horizontal")
for (var hLines = 0; hLines < horizontalLines.length; hLines++) {
  horizontalLines[hLines].style.width = "100%"
}

.lines-horizontal {
  position: relative;
  width: 0%;
  transition: width 2s;
  height: 5px;
  background-color: black;
  opacity: 0.2;
  z-index: -5;
  margin: 0px auto 10px auto;
}