css - 几个 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