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

Firefox 19中有几个CSS3关键帧无效/错位

1 个答案: