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

它没有用，因为你声明了错误的属性。

firefox所需的声明只是animation。只有Chrome和Safari需要-webkit-前缀才能获得此CSS3效果。

所以你的代码是：

-webkit-animation:slideshow 21s infinite;

animation:slideshow 21s infinite;

http://www.w3schools.com/css3/css3_animations.asp

Answer 2

根据Mozilla的说法虽然支持@keyframes，但它目前还不稳定，语法看起来应该像你现有的那样，但是它们提供的工作动画似乎避免使用速记来定义动画属性，并且它不使用-moz-animation前缀，它只使用@ -moz-keyframes并调用常规的'animation'属性;

https://developer.mozilla.org/samples/cssref/animations/cssanim1.html

他们的CSS看起来像这样：

h1 {
    animation-duration: 3s;
    animation-name: slidein;
}

@-moz-keyframes slidein {
0% {
    margin-left: 100%;
    width: 300%;
}

100% {
    margin-left: 0;
    width: 100%;
}
}

也许你应该试试

#slideshow {
animation-name:slideshow;
animation-duration:5s;
animation-iteration-count:infinite;
}

Answer 3

尝试添加背景：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;
}

@keyframes无法在Firefox中运行

3 个答案: