スクロール量に応じて、要素がふわっと表示される

Question

今回スクロール量に応じて、要素がふわっと上から表示される実装をしてみましたが、
IE以外は問題なく表示されたのですが、IEだけ動きがスムーズになりません。
IEでは効かないのでしょうか？

コードは以下の通りです。
index.html

<div class="animation"><img src="img/test_pht.jpg" alt=""></div>

---

index.css

.animation {
position: absolute;
top: 50%;
left: 50%;
}

---

index.js

$('.animation').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('.animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 350){
$(this).addClass("fadeInDown");
}
});
});

---

Comments

[k_fujimoto]

そもそも、このhtml, css, javascriptのソースコードだけでは質問者さんの事象を再現できないので、.fadeinDownのスタイル等、もう少し全体のソースコードを記載すると、問題が特定しやすいです。

Answer 1

一部、IEでは使用できないCSSのプロパティがあるので、それが原因となっているかもしれません。
CSS3のアニメーションなどのプロパティを疑って、ここで調べてみてはどうでしょうか。