2

嗯，你好。我在玩 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 中完美运行。

4

3 回答 3

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;
}
于 2014-12-09T00:19:26.040 回答
0

根据 Mozilla 的说法，虽然 @keyframes 受支持，但它目前不稳定，语法应该看起来像你已经拥有的那样，但是他们在这里提供的工作动画似乎避免使用简写来定义动画属性，并且它不使用 -moz-动画前缀，它只使用 @-moz-keyframes 并调用常规的“动画”属性；

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;
}
于 2013-11-18T14:42:54.350 回答
0

它不起作用，因为您声明了错误的属性。

Firefox 需要的声明只是animation. 只有 Chrome 和 Safari 需要-webkit-此 CSS3 效果的前缀。

所以你的代码是：

-webkit-animation:slideshow 21s infinite;

animation:slideshow 21s infinite;

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

于 2013-07-10T17:18:04.670 回答