css - Firefox19でいくつかのCSS3キーフレームが機能しない/位置が間違っている

Question

FirefoxとCSS3キーフレームに問題があります。ChromeとSafariでは問題はありません。FFはCSSコマンド「top」を無視しているように見えますが、その理由はわかりません。位置を相対に変更しましたが、成功しません。

コード：

.tile {
     position:absolute;
     z-index:10;
     background-color:#e20074;
     width:5px;
     height:5px;
 }     

#tile1 {
 animation:tile1 6s linear infinite;
 /* older Firefox: */
 -moz-animation:tile1 6s linear infinite;
 /* Safari and Chrome: */
 -webkit-animation:tile1 6s linear infinite;
 /* Opera: */
 -o-animation:tile1 6s linear infinite; 
}

@keyframes tile1 {
 0%      { left:10px; visibility:visible;}
 10%     { left:20px; top:10px; }
 20%     { left:30px; top:15px; }
 30%     { left:40px; top:10px; }
 40%     { left:50px; top:0px; }
 50%     { left:60px; top:10px; }
 60%     { left:70px; top:15px; }
 70%     { left:80px; top:10px; }
 80%     { left:90px; top:0px; }
 90%     { left:100px; top:10px; }
 100%    { left:115px; top:15px; }
}

私は実質的に同じことをする小さなテキストボックスを作りました、そしてそれは働きます。上記のコードの何が問題なのか理解できません。

#testbox {
    position:relative;
    background-color:Blue;
    width:100px;
    height:100px;
    animation: test 5s linear infinite;
}

@keyframes test {
    0% { left:100px; top:100px; }
    100% { left:10px; top:10px; }
}

Answer 1

top開始する位置を探しています。

ここで例を探すことをお勧めします