CODEWITHSUNDEEP
cssanimationopacitycss-animations
Tirtha
Tirtha

Reputation: 872

CSS3 opacity animation does not work with 'overflow:hidden'

I have A Scenrio where I need to do a Fade-In Animation on a DIV, which wasn't working as desired. After much experiment, I found out that one of the div's has got "overflow:hidden" in the css class applied to it. If I comment the "overflow:hidden" part, the animation seems to work perfectly. Though it fixed my problem, However, the question lingers in my mind, whether 'overflow:hidden' doesn not work with opacity animation. For your perusal, here's the code.

My Browser Chrome 15.0.XXX.X My OS 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>

Upvotes: 1

Views: 1014

Answers (1)

lemon郑
lemon郑

Reputation: 690

@
-webkit-keyframes fadeIn {

change to :

@-webkit-keyframes fadeIn {

@ need in the same line

http://jsfiddle.net/wX8DW/

Overflow: hidden does not affect the result

Upvotes: 2

Related Questions