0

我在使用 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; }
}
4

1 回答 1

2

它正在寻找top开始的位置。

您可能想在此处查找示例

于 2013-03-26T14:54:55.647 回答