The animation does not work in Firefox, while others work

 * { margin: 0; padding: 0; } .mo img { display: block; width: 100%; height: 100%; } .mo { width: 400px; height: 400px; position: relative; margin: 20px auto; } .fon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: dinamic 1s infinite steps(4); -webkit-animation: dinamic 1s infinite steps(4); -moz-animation: dinamic 1s infinite steps(4); } @-webkit-keyframes dinamic { 0% { background: url(http://maxim1978.0fees.us/images/1.png); background-size: cover; } 25% { background: url(http://maxim1978.0fees.us/images/2.png); background-size: cover; } 50% { background: url(http://maxim1978.0fees.us/images/3.png); background-size: cover; } 75% { background: url(http://maxim1978.0fees.us/images/4.png); background-size: cover; } } @-moz-keyframes dinamic { 0% { background: url(http://maxim1978.0fees.us/images/1.png); background-size: cover; } 25% { background: url(http://maxim1978.0fees.us/images/2.png); background-size: cover; } 50% { background: url(http://maxim1978.0fees.us/images/3.png); background-size: cover; } 75% { background: url(http://maxim1978.0fees.us/images/4.png); background-size: cover; } } @keyframes dinamic { 0% { background: url(http://maxim1978.0fees.us/images/1.png); background-size: cover; } 25% { background: url(http://maxim1978.0fees.us/images/2.png); background-size: cover; } 50% { background: url(http://maxim1978.0fees.us/images/3.png); background-size: cover; } 75% { background: url(http://maxim1978.0fees.us/images/4.png); background-size: cover; } } @-o-keyframes dinamic { 0% { background: url(http://maxim1978.0fees.us/images/1.png); background-size: cover; } 25% { background: url(http://maxim1978.0fees.us/images/2.png); background-size: cover; } 50% { background: url(http://maxim1978.0fees.us/images/3.png); background-size: cover; } 75% { background: url(http://maxim1978.0fees.us/images/4.png); background-size: cover; } } 
 <div class="mo"> <img src="http://maxim1978.0fees.us/images/bg.png" alt=""> <div class="fon"></div> </div>

This example is in the sandbox.

  • And the existing picture can be? - Qwertiy ♦
  • @Qwertiy in the sense possible? I did not understand - user33274
  • I do not know what does not work in FF, but I see this in chrome: i.stack.imgur.com/Nm6cW.png . - Qwertiy ♦
  • @Qwertiy and in the sandbox also does not work ?? - user33274
  • Error 1016 Ray ID: ... • 2016-11-22 22:15:12 UTC Origin DNS error on the link to the sandbox. - Qwertiy ♦

1 answer 1

In firefox / IE, the background-image property animation does not work. I recommend that you glue these images into one and animate the background-position property, not the background-image . Also have to get rid of the background-size: cover .

About the code will look like this, CSS:

 @keyframes bg-animation { from { background-position: 0 0; } to { background-position: 100% 0; } }

HTML:

 .fon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(full-image.png); animation: dinamic 1s infinite steps(4); }
  • so there will be no effect of the spray - I will look for another way out, look in google chrome how it should look - damn .. I will look for something else - user33274
  • If you animate with steps (), then there will be a step animation effect. At least in chrome, I see just such an animation. - Sasha Omelchenko
  • I have an example of such an animation on the site naukomania.ru , you can play with the help of devtuls, if you change the time of the animation, the aliasing will increase. - Sasha Omelchenko