Question

我正在为我的幻灯片显示使用css动画，但似乎由于某种原因它在Firefox中不起作用（它在Chrome上运行）。这是我的代码：

#slideshow{ 
    height:20em;
    width:50em;
    animation-name:slide;
    animation-duration:20s;
    animation-iteration-count:infinite;
    -webkit-animation:slide 20s infinite;
}


@-moz-keyframes slide{
    0%   {background : url('1.bmp');}
    50%  {background : url('2.bmp');}
    100% {background : url('1.bmp');}
}

@-webkit-keyframes slide{
    0%   {background : url('1.bmp');}
    50%  {background : url('2.bmp');}
    100% {background : url('1.bmp');}
}

谢谢！

Answer 1

更新：显然根据mozilla background-image是不可动画的：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

然而，它在Chrome中。

我会在这里留下，因为它可能与类似问题有关。

您正在#slideshow块中引用动画的非前缀版本，但实际上并未定义该动画。添加以下

    @keyframes slide{
        0%   {background : url('1.bmp');}
        50%  {background : url('2.bmp');}
        100% {background : url('1.bmp');}
    }

您可能还想在-moz块中添加#slideshow（由Firefox使用）前缀版本：

    #slideshow{ 
        height:20em;
        width:50em;
        animation-name:slide;
        animation-duration:20s;
        animation-iteration-count:infinite;
        -webkit-animation:slide 20s infinite;

       -moz-animation:slide 20s infinite; /* ADD THIS */
    }

关键帧在Firefox中不起作用

1 个答案: