Html CSS位置-如何制作动画框？

我有“绿色”DIV。这个DIV有“黄色”DIV和animate（scaleX，scaleY）。我想制作粉色和蓝色的盒子（带绿色DIV）并制作如下动画：

但我不能利用这个位置，使一切都不会崩溃：-/

---

这是我的代码：jsfiddle.net/KxM68/24/

只需添加两个框。您可以设置位置：绝对或使用边距

这里有一个带边距的解决方案

CSS:

以及添加了div的HTML

<div style="width: 300px; height: 120px; background-color: green; margin: 10px 0 0 10px; padding: 80px 0 0 30px;">
    <div class="element-animation">box</div>
    <div class="pinkbox"></div>
    <div class="bluebox"></div>
</div>

箱

这是我的动画：

<div style="width: 300px; height: 120px; background-color: green; margin: 10px 0 0 10px; padding: 80px 0 0 30px;">
    <div class="element-animation">box</div>
    <div class="pinkbox"></div>
    <div class="bluebox"></div>
</div>