css - 当 child 被动画向右移动时，隐藏的父溢出不起作用

Question

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

<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 .