анимация непрозрачности CSS3 не работает с «переполнением: скрытым»

У меня есть Scenrio, где мне нужно сделать анимацию Fade-In на DIV, которая не работает по желанию. После большого эксперимента я обнаружил, что у одного из div есть «переполнение: скрытое» в класс css, примененный к нему. Если я прокомментирую часть «переполнения: скрытая», анимация, похоже, работает отлично. Хотя он исправил мою проблему, тем не менее, вопрос задерживается в моем сознании, не работает ли «переполнение: скрыто» с анимацией непрозрачности. Для вашего ознакомления, вот код.анимация непрозрачности CSS3 не работает с «переполнением: скрытым»

Мой браузер 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

не помогает. даже обновил браузер до хром 16.0.XXX.X, и его все равно то же самое. Тем не менее, я должен упомянуть, что иногда, вероятно, 20-30 раз, анимация работает отлично, но как только я очищаю кеш и перезапускаю браузер, он больше не работает. – Tirtha

Я также должен упомянуть, что я тестировал это в iPad Safari Browser, и переполнение: скрытый не проблема. – Tirtha

Кажется, проблема связана только с моей системой. Думаю, я соглашусь с этим ответом как на правильную. – Tirtha

анимация непрозрачности CSS3 не работает с «переполнением: скрытым»

ответ

Смежные вопросы