1

I have animated sprites with css steps and when tested on Firefox and Explorer11 i understand that it do not behave like Chrome.

I have the animattion like the below

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

My sprites are vertical. And i have teh animation like this on the elements

-webkit-animation: sprite 3.5s steps(60) infinite; // the frame count is minus - from original frame count
-moz-animation: sprite 3.5s steps(60) infinite;
-ms-animation: sprite 3.5s steps(60) infinite;
-o-animation: sprite 3.5s steps(60) infinite;
animation: sprite 3.5s steps(60) infinite;
background: url(images/sprites/solutions/solution_2_61square_450-min.png) no-repeat 0 0% !important;
background-size: 100% !important;

So all are shaking In Explorer and do not play in Firefox.

Any idea why?

See working demo https://jsfiddle.net/anahitdev/02kmpr6u/ Thanks

Anahit Ghazaryan
  • 73
  • 12
  • use -moz- prefix for firefox and -ms- prefix for internet explorer 11 – Sahil Dhir Apr 19 '17 at 06:04
  • 40500/450=90... Your sprite has 90 frames not 89. – Rob Parsons Apr 24 '17 at 08:30
  • Yes but when i have the steps with exact number of frames it did not animate. It just moved vertically. See here https://jsfiddle.net/02kmpr6u/5/ @RobParsons – Anahit Ghazaryan Apr 25 '17 at 06:24
  • yes.... thats because you are resizing the animated sprite in a container that does match the dimensions of the sprite frames. (or your sprite is missing frames)...you are offsetting the background position as a percentage of the height of the containing div element, not as a percentage of the sprite height. – Rob Parsons Apr 25 '17 at 18:53
  • Can you pls give me a working example @RobParsons? – Anahit Ghazaryan Apr 27 '17 at 14:15
  • https://jsfiddle.net/simurai/CGmCe/ you should be able to use your jsfiddle... you've just got to work out the maths....find the correct dimensions of the sprite frame... . size the absolutely position div to the size of a sprite frame, each step will then position the background image's. your div background size must match the size of each sprite frame. – Rob Parsons Apr 27 '17 at 23:52

1 Answers1

0

Change your keyframe css code to this , so it will support all browser.

@keyframes sprite {
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
@-webkit-keyframes sprite {/* Chrome and Safari*/
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
@-moz-keyframes sprite { /* Mozilla Firefox */
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
@-ms-keyframes sprite { /*Internet Explorer*/
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33