Not an animated gif

Using this png and CSS sprites.
jgsprites

Copying CSS sprite sheet animation – jsFiddle
Using my much reused favourite (of the ones I’ve made) animated gif. I converted it to a long strip.

So the CSS without the vendor prefixes


.jg {
	margin:auto;
    width: 203px;
    height: 203px;
    background-image: url("jgsprites.png");
	animation: play 1.5s steps(9) infinite;

}

@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -1827px; }
}

I had to strip all of the returns out of the CSS and paste it into the WordPress blog editor to get it to work.

2 thoughts on “Not an animated gif”

Leave a Reply