html - @keyframes 在 Firefox 中不工作

Question

嗯，你好。我正在玩弄 CSS3 的 @keyframes 属性，动画似乎在 Firefox 中不起作用。有人可以告诉我我的代码有什么问题吗？

谢谢!

#slideshow{
    height : 150px;
    width : 190px;
    animation:slideshow 21s infinite;
    -webkit-animation:slideshow 21s infinite;
    -moz-animation:slideshow 21s infinite;
}



@keyframes slideshow{
    0%   {background : url('1.jpg');}
    14%  {background : url('2.jpg');}
    28%  {background : url('3.jpg');}
    42%  {background : url('4.jpg');}
    56%  {background : url('5.jpg');}
    70%  {background : url('6.jpg');}
    84%  {background : url('7.jpg');}
    100%  {background : url('1.jpg');}
}

@-webkit-keyframes slideshow{
    0%   {background : url('1.jpg');}
    14%  {background : url('2.jpg');}
    28%  {background : url('3.jpg');}
    42%  {background : url('4.jpg');}
    56%  {background : url('5.jpg');}
    70%  {background : url('6.jpg');}
    84%  {background : url('7.jpg');}
    100%  {background : url('1.jpg');}
}

@-moz-keyframes slideshow{
    0%   {background : url('1.jpg');}
    14%  {background : url('2.jpg');}
    28%  {background : url('3.jpg');}
    42%  {background : url('4.jpg');}
    56%  {background : url('5.jpg');}
    70%  {background : url('6.jpg');}
    84%  {background : url('7.jpg');}
    100%  {background : url('1.jpg');}
}

此外，动画在 Chrome 中完美运行。

Answer 1

尝试添加背景:url('1.jpg');到#slideshow 元素 css 来初步建立它。这总能为我解决这个问题。 Firefox 似乎需要一个特定的起点。

#slideshow{
background: url('1.jpg');
height : 150px;
width : 190px;
animation:slideshow 21s infinite;
-webkit-animation:slideshow 21s infinite;
-moz-animation:slideshow 21s infinite;
}