为什么这个css3动画在chrome和IE中看起来很棒，但在firefox中却很糟糕？

Question

我在用户King King的个人资料中看到了这一点，粗略地看一下，所有浏览器的代码看起来几乎相同。那么为什么这个Css3动画在chrome和IE中呈现得非常流畅，但在FF中却起伏不定？下面是一个小提琴（http://jsfiddle.net/viphalongpro/GEnUU/），找到JS + CSS

HTML

<div class='flag'>
</div>

JS

var h = $('.flag').width();
for(var i = 0; i < h; i++){
    var flagElement = $("<div class='flag-element'>");
    flagElement.css('background-position', -i + "px 0");
    flagElement.css('-webkit-animation-delay', i * 10 + 'ms');
    flagElement.css('-moz-animation-delay', i * 10 + 'ms');
    flagElement.css('-ms-animation-delay', i * 10 + 'ms');
    flagElement.css('animation-delay', i * 10 + 'ms');
    $('.flag').append(flagElement);
}

CSS

.flag {
    width:300px;
    height:200px;
    margin:50px;
}
.flag-element {
    -webkit-animation:oscill 1s ease-in-out infinite alternate; 
    -moz-animation:oscill 1s ease-in-out infinite alternate; 
    -ms-animation:oscill 1s ease-in-out infinite alternate; 
    animation:oscill 1s ease-in-out infinite alternate; 
    background: url('http://i.imgur.com/8VSL8Ve.gif');
    background-size: 300px 100%;
    position:relative;
    height:100%;
    width:1px;
    display:inline-block;
    box-shadow:0 1px grey, 0 -1px gray;
}
@-webkit-keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}
@-moz-keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}
@-ms-keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}
@keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}