Keyframes animation working only on chrome/chromium

Question

I have done a simple three image transition animation code. The code can be found here:

http://jsfiddle.net/harshithjv/AF3Jj/

This code works only on chrome and chromium browsers. It does not work on Apple's Safari browser also. Also it does not work on any other browsers(I tested on Firefox and IE9, not tried Opera).

I guess that I am missing something on animation shorthand property. Please help me out.

Edit:

I am updating with the code for some clarity, which I should have done in first place.

HTML Code:

<div class="animated_star"></div>

CSS3 Code:

@-moz-keyframes shining_star {
    from {
        background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
    }
    50% {
        background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
    }
    to {
        background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
    }
}

@-webkit-keyframes shining_star {
    from {
        background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
    }
    50% {
        background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
    }
    100% {
        background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
    }
}

@keyframes shining_star {
    from{
        background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
    }
    50% {
        background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
    }
    to {
        background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
    }
}
.animated_star{
    height: 16px;
    width: 16px;
    float: left;
    -webkit-animation: shining_star 1s infinite; /* works only for Chrome/Chromium */
    -moz-animation: shining_star 1s infinite;
    animation: shining_star 1s infinite;
}

Only JavaScript section is empty. There is single line of `div` statement in HTML section and CSS section has some css. — Harshith J.V., Apr 22 '13 at 13:04
YA thats what I am asking. It does not work on any browsers other than Chrome/Chromium. — Harshith J.V., Apr 22 '13 at 13:13
http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations — Morpheus, Apr 22 '13 at 13:18
Hmm. So for me, it works on Chrome and Safari, but checking in Firefox 20 it shows nothing. Oddly this link http://jsfiddle.net/T88X5/3/light/ linked to the 'see also' section from https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations doesn't work for me in Firefox either! — dtt101, Apr 22 '13 at 14:12
@Morpheus - Thanks for the link. It looks like using sprite image of three stars (into one image) and changing position will be the better solution. If you can explain with code I can approve as answer. Will try to submit my own answer in a day's time. — Harshith J.V., Apr 22 '13 at 16:04
@dtt101 - Your jsFiddle works on both Firefox and Chrome for me. By the way, thanks for the MDN docs link, its quite a resourceful read. — Harshith J.V., Apr 22 '13 at 16:07

score 1 · Answer 1 · answered Apr 29 '13 at 13:08

Background image isn't a property that can be animated - you can't tween the property.

Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.

also

It works in Chrome 19!

So at some point in the future, keyframes could really be... frames!

You are living in the future ;)

score 0 · Accepted Answer · answered Apr 23 '13 at 05:37

After some research on this, I figured that background-image CSS property is not supported inside keyframes in most browsers. It must be because of loading too many images dynamically can lead to performance issues if larger images are loaded.

Thanks to @Morpheus for another stackoverflow link(http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations), through which I decided to resolve the issue through image sprites and reposition(using CSS property - background-position) within that sprite to select the image as I want it. The problem with background-position CSS property is that when it applied for CSS animation through keyframes, the reposition shows the movement within image sprite. But I wanted to show 3 stars transition quickly without movement in three frames. To make that possible, I had to use 6 keyframes where first star's position will be set in 0% and 33%, second star's position will be set in 34% and 66% and the third star will be set in 67% and 100%.

I have created a jsFiddle which does not have image sprites of same stars. I could not locate sprite for same stars online and so I used alternate stars. Its not a perfect example since it has sloppy animation, but I have created a smaller sprite image (48px x 16px) on my system, and animation looks good enough.

HTML Code:

<div class="animated_star"></div>

CSS Code:

@-moz-keyframes shining_star {
    0% { background-position: -135px 0px; }
    33% { background-position: -135px 0px; }
    34% { background-position: -135px -260px; }
    66% { background-position: -135px -260px; }
    67% { background-position: -270px -260px; }
    100% { background-position: -270px -260px; }
}

@-webkit-keyframes shining_star {
    0% { background-position: -135px 0px; }
    33% { background-position: -135px 0px; }
    34% { background-position: -135px -260px; }
    66% { background-position: -135px -260px; }
    67% { background-position: -270px -260px; }
    100% { background-position: -270px -260px; }
}

@keyframes shining_star {
    0% { background-position: -135px 0px; }
    33% { background-position: -135px 0px; }
    34% { background-position: -135px -260px; }
    66% { background-position: -135px -260px; }
    67% { background-position: -270px -260px; }
    100% { background-position: -270px -260px; }
}

.animated_star{
    height: 130px;
    width: 135px;
    float: left;
    background: transparent url('http://azmind.com/wp-content/uploads/2011/11/social-star-icons.png') no-repeat fixed;
background-position: 0px -390px;
    -webkit-animation: shining_star .5s infinite linear; 
    -moz-animation: shining_star .5s infinite linear;
    animation: shining_star .5s infinite linear;
}

The jsFiddle link: http://jsfiddle.net/harshithjv/7QvSP/2/

Keyframes animation working only on chrome/chromium

2 Answers2