Question

我有一个Scenrio，我需要在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>

Answer 1

@ -webkit-keyframes fadeIn {

更改为：

@-webkit-keyframes fadeIn {

@需要在同一行

http://jsfiddle.net/wX8DW/

溢出：隐藏不会影响结果

CSS3不透明度动画不适用于'overflow：hidden'

1 个答案: