从内到外制作补间动画线

Question

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

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

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

这是我的代码：

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

CSS：

#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;
}

感谢。