1
DIVでフェードインアニメーションを実行する必要があるシーンがありますが、これは必要に応じて動作しませんでした。 多くの実験の後、divの1つがCSSクラスに "overflow：hidden"を持っていることがわかりました。私が「オーバーフロー：隠された」部分にコメントすると、アニメーションは完全に動作するように見えます。 しかし、私の問題は解決しましたが、「オーバーフロー：隠し」かどうかは、不透明アニメーションでは機能しません。 あなたの見解のために、ここにコードがあります。CSS3不透明アニメーションが 'overflow：hidden'で動作しない
マイブラウザクローム15.0.XXX.X 私の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>
は役に立ちません。ブラウザをchrome 16.0.XXX.Xにアップグレードしても、それはまだ同じです。しかし、おそらく、おそらく20〜30回後に、アニメーションが完璧に動作することを言及する必要がありますが、キャッシュをクリアしてブラウザを再起動するとすぐには動作しなくなります。 – Tirtha
私はまた、iPadのSafariブラウザでこれをテストしたことを言及する必要があります。オーバーフロー：隠された問題はそこにありません。 – Tirtha
私のシステムにのみ問題があるようです。私はこの答えを正しいものとして解決すると思う。 – Tirtha