Javascript 从内到外制作两条动画线

我有一个线条的图像，如下面的小照片所示，我想用一个Tween动画使它看起来像是从中间向外画的。

我想出了一个很好的方法，至少在理论上是这样。我已经将我的图像尺寸和绝对位置设置为我希望它在最后的位置。我将它包含在一个小的绝对定位div中，该div具有自动边距和零宽度/高度，随着Tween的增加而增加，因此它从中间缓慢向外扩展，因此当容器扩展时，它看起来像是在向外“绘制”图像

但是，我有一个问题，如下图所示。线条图像相对于包含的div定位在中心，而不是主体（我理解这是因为它们都是绝对定位的）。如何将子元素相对于主体而不是容器放置在容器中，而不将其作为子元素移除（此div将覆盖我的其他背景层）

这是我的密码：

<div id='cover'><div id='child'></div></div>

谢谢

---

为什么要相对于车身定位线条？我想让线条看起来像是从内部绘制的，点在那里，向外绘制。我不知道如何做到这一点，因为我有多个背景div，我不想覆盖梯度伪元素。。。因此，我认为解决办法是在中间使一个面具在宽度和高度向外增加，同时保持内部图像（线）固定。你能想出别的办法吗？

#cover {
    background-image: url('/images/slide21/bg_layer3.png');
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: none;
    height: 46vh;
    width: 78.5vw;
    z-index: -8;
    position: absolute;
    top: 0vw;      // these are coordinates that should
    right: 0;      // be positioned relative to the
    left: -0.5vw;  // body not container
    opacity: 1;
}

#container {
    width: 0;  // as animation occurs, width and
    height: 0; // height increase to 100%
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    z-index: -5;
    opacity: 1;
}