子程序被动画右移时隐藏的父溢出

Question

我试图将儿童div从它的位置向右与css3动画。我已将父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;
}

还有这里可以看到小提琴。