Question

我在网页上有一个幻灯片显示的网站。它在Chrome，IE和Safari中工作了一年，但现在它开始在浏览器中闪烁，而且它在Firefox中根本不起作用。

这里是我所谈论的例子： ostapenko-photo.com

#slideshow {               
    position: absolute;
    top:0;
    left:0; 
    display: block; 
    z-index: -10;
    width: 100%; 
    height: 100%;
    min-width: 400px;
    background: url(../slideshow/01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 0px;
    padding-top: 0px;

    animation: slideshow_animation 60s; 
    animation-delay: 0.5s;
    animation-iteration-count: infinite;*/

    /*Chrome, Safari, Opera */
    -webkit-animation: slideshow_animation 60s; 
    -webkit-animation-delay: 0.5s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation: slideshow_animation 60s;
    -moz-animation-delay: 0.5s;
    -moz-animation-iteration-count: infinite;

    -o-animation: slideshow_animation 60s;
    -o-animation-delay: 0.5s;
    -o-animation-iteration-count: infinite;
}

@keyframes slideshow_animation {
    6.25%   {background-image: url(../slideshow/01.jpg);}
    12.5%   {background-image: url(../slideshow/02.jpg);}
    18.75%  {background-image: url(../slideshow/03.jpg);}
    25%     {background-image: url(../slideshow/04.jpg);}
    31.25%  {background-image: url(../slideshow/05.jpg);}
    37.5%   {background-image: url(../slideshow/06.jpg);}
    42.75%  {background-image: url(../slideshow/07.jpg);}
    50%     {background-image: url(../slideshow/08.jpg);}
    56.25%  {background-image: url(../slideshow/09.jpg);}
    62.5%   {background-image: url(../slideshow/10.jpg);}
    68.75%  {background-image: url(../slideshow/11.jpg);}
    75%     {background-image: url(../slideshow/12.jpg);}
    81.25%  {background-image: url(../slideshow/13.jpg);}
    87.5%   {background-image: url(../slideshow/14.jpg);}
    93.75%  {background-image: url(../slideshow/15.jpg);}
    100%    {background-image: url(../slideshow/16.jpg);}
}

@-webkit-keyframes slideshow_animation {
    6.25%   {background-image: url(../slideshow/01.jpg);}
    12.5%   {background-image: url(../slideshow/02.jpg);}
    18.75%  {background-image: url(../slideshow/03.jpg);}
    25%     {background-image: url(../slideshow/04.jpg);}
    31.25%  {background-image: url(../slideshow/05.jpg);}
    37.5%   {background-image: url(../slideshow/06.jpg);}
    42.75%  {background-image: url(../slideshow/07.jpg);}
    50%     {background-image: url(../slideshow/08.jpg);}
    56.25%  {background-image: url(../slideshow/09.jpg);}
    62.5%   {background-image: url(../slideshow/10.jpg);}
    68.75%  {background-image: url(../slideshow/11.jpg);}
    75%     {background-image: url(../slideshow/12.jpg);}
    81.25%  {background-image: url(../slideshow/13.jpg);}
    87.5%   {background-image: url(../slideshow/14.jpg);}
    93.75%  {background-image: url(../slideshow/15.jpg);}
    100%    {background-image: url(../slideshow/16.jpg);}
} 

@-moz-keyframes {
    6.25%   {background-image: url(../slideshow/01.jpg);}
    12.5%   {background-image: url(../slideshow/02.jpg);}
    18.75%  {background-image: url(../slideshow/03.jpg);}
    25%     {background-image: url(../slideshow/04.jpg);}
    31.25%  {background-image: url(../slideshow/05.jpg);}
    37.5%   {background-image: url(../slideshow/06.jpg);}
    42.75%  {background-image: url(../slideshow/07.jpg);}
    50%     {background-image: url(../slideshow/08.jpg);}
    56.25%  {background-image: url(../slideshow/09.jpg);}
    62.5%   {background-image: url(../slideshow/10.jpg);}
    68.75%  {background-image: url(../slideshow/11.jpg);}
    75%     {background-image: url(../slideshow/12.jpg);}
    81.25%  {background-image: url(../slideshow/13.jpg);}
    87.5%   {background-image: url(../slideshow/14.jpg);}
    93.75%  {background-image: url(../slideshow/15.jpg);}
    100%    {background-image: url(../slideshow/16.jpg);}
}

我有一个ID为slideshow的div，我通过CSS更改了它的背景。

为什么它在Firefox中不起作用？
为什么它会在Chrome中闪烁？（它不会一直眨眼，这让我更难弄清楚原因）

Answer 1

我认为这意味着您的CSS3动画方法要么 A。）还不在{em>（您的版本） Firefox或 B上supported。）您必须为该浏览器添加其他特定处理才能阅读。您似乎已经使用' Chrome，Safari，Opera（？）'完成了这项工作。这里有一些特定于Firefox的info。

注意：//

您的@-moz-keyframes {

在其他电话之后没有slideshow_animation。

可能错字，这可能是你的问题;）

因为，对于Chrome中的闪烁，您似乎没有转换集（在背景图像更改之前）;所以默认情况下CSS3有点不稳定。

例如

   transition: all 0.3s ease-in-out;

*在照片更改之前，您似乎还有 .5 秒延迟。尝试删除它和/或替换上述转换。*

CSS幻灯片不再适用于Firefox;在所有其他浏览器中闪烁

1 个答案: