[Solved] CSS3 keyframe animation only working in Chrome and iOS

[braderz31]

I’ve created a ‘CSS only’ image slider but I am completely baffled as to why I can only get it working in Chrome, iOS and Safari on Mac. For some reason it will not work on Mozilla, IE or Safari on PC.

Can anybody suggest what might be causing this issue please?

.home-featured {
    background-image: url(images/home_bg.jpg);
    -webkit-animation: slides 20s  infinite;
    -moz-animation: slides 20s  infinite;
    -ms-animation: slides 20s  infinite;
    -o-animation: slides 20s   infinite;
    animation: slides 20s infinite;
}

@-webkit-keyframes slides {
    25%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-background-size: cover; 
    }
    50%   { 
        background-image: url(images/home_bg_2.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-background-size: cover; 
    }
    75%    { 
        background-image: url(images/home_bg_3.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-background-size: cover; 
    }
    100%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-background-size: cover; 
    }
}
@-moz-keyframes slides {
    25%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -moz-background-size:    cover;
    }
    50%   { 
        background-image: url(images/home_bg_2.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -moz-background-size:    cover;
    }
    75%   { 
        background-image: url(images/home_bg_3.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -moz-background-size:    cover;
    }
    100%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -moz-background-size:    cover;
    }
}
@-o-keyframes slides {
    25%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -o-background-size:    cover;
    }
    50%   { 
        background-image: url(images/home_bg_2.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -o-background-size:    cover;
    }
    75%   { 
        background-image: url(images/home_bg_3.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -o-background-size:    cover;
    }
    100%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        -o-background-size:    cover;
    }
}
@keyframes slides {
    25%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size:    cover;
    }
    50%   { 
        background-image: url(images/home_bg_2.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size:    cover;
    }
    75%   { 
        background-image: url(images/home_bg_3.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size:    cover;
    }
    100%   { 
        background-image: url(images/home_bg.jpg);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size:    cover;
    }
}

Any help is much appreciated as I just can’t figure this out.

Many thanks in advance.

Brad

[Paulie_D]

My guess is that Windows doesn’t like transitioning background images,

There is no intermediate step between one image and another so at say 80% what are you expecting?

It can’t be 25% of image and 75% of another….or can it?

I would also point out there is usually no need to repeat properties / values that aren’t changing.

However, if you like to put your code (and images) into a Codepen.io demo, we can take a look in our browsers and OSs

[Paulie_D]

Hmmm…apparently it can

http://codepen.io/Paulie-D/pen/RNNKZL

Works in Chrome 64bit on W7.

[braderz31]

:-)

Yes, this is the result I have on my site. The images fade into one another.

I found that not repeating the properties prevented it from working in Chrome. Maybe I’m just being stupid and need to play around with the css a bit more.

Regarding IE and Firefox – still no joy here

Thanks

Brad

[Paulie_D]

I know that FF & IE tend to be finicky and might require a 0% value too as part of the keyframes.

[braderz31]

Here is a CodePen

I’ve tried adding a 0% value but still can’t get it working in FF or IE.

It’s baffling!

[Paulie_D]

Aha…apparently – FF and IE do not support the ‘animation/transition’ of background images.

It’s not a property the spec says should be supported….so they don’t

[braderz31]

Ah.. what a shame.

Thought I was on to something there.

Thanks so much :-)

[Author]

Posts