CSS slideshow doesn't work in Firefox anymore; blinks in all other browsers

Question

I have a website with slideshow on the page. It worked in Chrome and IE and Safari for a year, but now it started blinking in the browsers, and it wouldn't work at all in Firefox.

here's the example of what I'm talking about: 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);}
}

I have a div with id slideshow , and I change the background of it, through CSS.

1. Why doesn't it work in Firefox?
2. Why does it blink in Chrome? (it doesn't blink always, which makes it even harder for me to figure out why)

Answer 1

I think that means your CSS3 animation method is either A.) not yet supported on (your version of) Firefox or B.) You have to add additional specific treatment for that browser to read it. You seem to have done that with ' Chrome, Safari, Opera(?) '. Here's some info specific to Firefox.

---

Note: //

Your @-moz-keyframes {

Does not have slideshow_animation after it as your other calls do.

Possible typo, this could be your problem ;)

---

As, for the flickering in Chrome you don't seem to have a transition set (before background image change) ; so by default CSS3 is a little choppy.

Eg.

   transition: all 0.3s ease-in-out;

*You also seem to have a .5 second delay before photo changes. Try removing that and/or replacing with the above transition.*