CSS3 不透明度动画不适用于“溢出：隐藏”答案

【问题标题】：CSS3 opacity animation does not work with 'overflow:hidden'CSS3 不透明度动画不适用于“溢出：隐藏”
【发布时间】：2012-01-20 21:22:29
【问题描述】：

我有一个场景，我需要在一个 DIV 上做一个淡入动画，但它没有按预期工作。经过大量实验，我发现其中一个 div 在应用于它的 css 类中出现了“溢出：隐藏”。如果我评论“溢出：隐藏”部分，动画似乎工作得很好。虽然它解决了我的问题，但是，这个问题在我脑海中挥之不去，“溢出：隐藏”是否不适用于不透明动画。为了您的阅读，这里是代码。

我的浏览器 Chrome 15.0.XXX.X 我的操作系统 Windows XP

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#MainContainer {
    opacity: 1;
    position: absolute;
    height: 500px;
    top: 10px;
    width: 600px;
    left: 10px;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

.focussedItem {
    position: absolute;
    left: 300px;
    top: 200px;
    width: 450px;
    height: 230px;
    margin: 0px 0px;
    opacity: 1;
}

.innerDiv {
    position: relative;
    width: 450px;
    height: 150px;
    left: 10px;
    top: 40px;
    overflow: hidden; /* This is where the Problem is */
}

.optionItem {
    position: absolute;
    vertical-align: middle;
    text-align: left;
    font-size: 35px;
    width: 450px;
    height: 50px;
    left: 25px;
}

@
-webkit-keyframes fadeIn { 
    0% {opacity: 0;}
    100%{opacity:1;}
}
</style>
<script type="text/javascript">
    document.onkeydown = KeyCheck;
    function KeyCheck(e) {
        console.log(e.keyCode);
        document.getElementById("MainContainer").style.webkitAnimationDuration = "2000ms";
        document.getElementById("MainContainer").style.webkitAnimationName = "fadeIn"
    }
</script>
</head>
<body>

    <div>press space to test</div>

    <div id="MainContainer" class="MainContainer">
        <div id="SubContainer" class="focussedItem"
            style="height: 290px; top: 250px;">
            <div id="OptionRing" class="innerDiv"
                style="height: 190px; top: 50px;">
                <div class="optionItem" style="top: -40px;">OPTION 1</div>
                <div class="optionItem" style="top: 10px;">OPTION 2</div>
                <div class="optionItem" style="top: 60px;">OPTION 3</div>
                <div class="optionItem" style="top: 110px;">OPTION 4</div>
                <div class="optionItem" style="top: 160px;">OPTION 5</div>
                <div class="optionItem" style="top: 210px;">OPTION 6</div>
            </div>
        </div>
    </div>

</body>
</html>

【问题讨论】：

标签： css animation opacity css-animations

【解决方案1】：

@ -webkit-keyframes fadeIn {

改为：

@-webkit-keyframes fadeIn {

@需要在同一行

http://jsfiddle.net/wX8DW/

溢出：隐藏不影响结果

【讨论】：

没有帮助。甚至将浏览器升级到 chrome 16.0.XXX.X，还是一样。但是，我必须提到，有时，大概 20-30 次后，动画效果很好，但是当我清除缓存并重新启动浏览器时，它就不再起作用了。
我还需要提一下，我在 iPad Safari 浏览器中对此进行了测试，并且溢出：隐藏在那里不是问题。
这似乎只是我的系统的问题。我想我会以这个答案作为正确答案来解决。