幾個CSS3關鍵幀不工作/在Firefox中有錯誤的位置19

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開始的位置。

你可能想要尋找一個example here