CSS3 Animation issue on Chrome

HTML & CSS
1

Hi Guys,

Need to solve this issue

Here is the page…

http://bobswoodburners.com/new-build/

If you scroll down you will see orange circle icon in FireFox it crossfades to different icon nicely but on Chrome it is not working for me the cross fade at all any reason why?

Also, doesnt work on Safari either.

Thanks,

Mike

2

I tried putting in @-webkit- before the keyframes but it just cancelled out a bunch of styles below it so not sure what I am doing wrong here. I figured the webkit would solve the issue with Chrome and Safari.

3

HI,

I think you need these also for webkit.


#cf3 img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
}

That works for me.

4