スクロールしたら画像をスライドインさせたいが、勝手に動いてしまう。

画面をスクロールしたときに画像を横からスライドインさせたいのですが、スライドインのタイミングが合わず、早すぎたり遅すぎたり、またスクロールせず数秒放置すると勝手に動いてしまいます。画像が半分ほど見えたところでスライドインさせたいのですが、どう対処したらよいでしょうか。ご教授よろしくお願いします。

HTML

        <div class="container">
            <div class="fadeLeft">
            <img src="car.png" class="img-fluid">
            </div>
        </div>

CSS

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.7s;
animation-delay: 3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
from {
opacity: 0;
transform: translateX(-100px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

jQuery

function fadeAnime(){

$('.fadeLeftTrigger').each(function(){
var elemPos = $(this).offset.top-10();
var scroll = $(window).scrolltop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
$(this).addClass('fadeLeft');
}else{
$(this).removeClass('fadeLeft');
}
});
}