How can I create a looping fade-in/out image effect using CSS 3 transitions?

Question

I’m trying to create a looping fade in/out effect for an image. It’s working in Chrome, but it doesn’t work in Firefox.

Here’s the code: http://jsfiddle.net/FTLJA/254/

(I did make it work with jQuery but that made the browser slow and flickery on Android phones, so I’m trying CSS instead.)

Thanks for any help.

Update: fixed.. please check the link again

Answer 1

Well, if ypu're only setting the WebKit properties (only @-webkit-keyframes and only -webkit-animation-...), then of course it will work only in WebKit and not in Firefox - add them with -moz prefix as well. Also remove the quotes around 'blink' to leave it just... blink and it works http://jsfiddle.net/FTLJA/261/