通过动画向右移动子项时，父级溢出隐藏不起作用

Question

我正在尝试使用css3动画将子div从其位置移动到右侧。我已将父div溢出设置为隐藏。但是当孩子向右移动溢出隐藏不起作用。 如何让孩子在父母区域之外移动时隐藏它。

<div class="container">
        <div class="content">1</div>
</div>

[Example](http://jsfiddle.net/Mostwanted_cJ/zcn9G/3)

Answer 1

在检查Chrome中的代码并添加webkit的动画后（我起初没有这样做），我能够很容易地解决这个问题。

将position: relative;添加到.container的css中，一切都应按预期工作。

CSS应该是这样的。

.container {
    width: 200px;
    height: 200px;
    background-color: #aaa;
    overflow: hidden !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: relative;
}

fiddle can be seen here。