CSS3不透明動畫不適用'overflow：hidden'

我有一個Scenrio，我需要在DIV上做一個Fade-In Animation，這個DIV沒有像所期望的那樣工作。經過大量實驗後，我發現其中一個div在應用於它的css類中已經「溢出：隱藏」了。如果我評論「溢出：隱藏」部分，動畫看起來很完美。雖然它解決了我的問題，但是，這個問題在我腦海裏縈繞，'overflow：hidden'是否不適用於不透明動畫。爲了您的細讀，這裏是代碼。CSS3不透明動畫不適用'overflow：hidden'

我的瀏覽器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>

來源

2011-12-15 Tirtha

@ -webkit-keyframes fadeIn {

變化：

@-webkit-keyframes fadeIn {

@需要在同一行

http://jsfiddle.net/wX8DW/

溢出：隱藏不影響結果

來源

2011-12-15 06:26:43

沒有幫助。甚至將瀏覽器升級到Chrome 16.0.XXX.X，並且仍然如此。但是，我必須提到，有時候，大概20-30次之後，動畫完美運行，但只要清除緩存並重新啓動瀏覽器，它就不再有效。 – Tirtha 2011-12-15 06:58:22

CSS3不透明動畫不適用'overflow：hidden'

回答

相關問題