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'

回答

相关问题