为firefox中的元素设置动画会移动其他元素

我正在开发带有键盘控制滚动的单页网站。

我创建了一个javascript函数，它可以为div设置动画以创建滚动效果。

js:

var current_page = "#first";
function animateScroll(curr, des){
    $(des).show();
    $(des).css("position", "absolute");
    $(des).css("z-index", "2");
    $(curr).css("z-index", "1");
    $(des).css("top", "100%");
    $(des).animate({
        top : "0px"
    }, 800, function(){
        $(curr).hide();
        current_page = des;
    });
}
$(document).on("keyup", function(e){
    if(e.keyCode === 40){
        animateScroll(current_page, "#" + $(current_page).next().attr("id"));
    }
});

html:

<div id = 'why_am_i_moving'></div>
<div class = 'main' id = 'first'>press down key</div>
<div class = 'main' id = 'second'></div>
<div class = 'main' id = 'third'></div>
<div class = 'main' id = 'fourth'></div>
<div class = 'main' id = 'fifth'></div>

css：

body, html{
    margin : 0px;
    padding : 0px;
    width : 100%;
    height : 100%;
    overflow : hidden;
}
div.main{
    width : 100%;
    height : 100%;
    display : none;
    background : white;
}
#first{
    background : red;
    display : block;
}
#second{
    background : blue;
}
#third{
    background : green;
}
#fourth{
    background : yellow;
}
#why_am_i_moving{
    position : absolute;
    bottom : 0;
    width : 200px;
    height : 200px;
    background : brown;
    z-index : 3;
}

有时，当我在keyup上运行函数时，页面上的所有元素在开始动画之前都会稍微向上移动。

这只发生在firefox（38.0.5）中，并且只有当我使用向下键启动动画时才会发生。

小提琴：http://jsfiddle.net/bd8wzr1L/2/

有人知道这里发生了什么吗？谢谢你的帮助。