CODEWITHSUNDEEP
animationcsscss-transitions
Binh Nguyen
Binh Nguyen

Reputation: 1313

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

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

Upvotes: 5

Views: 15206

Answers (2)

Ana
Ana

Reputation: 37179

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/

Upvotes: 14

Paul D. Waite
Paul D. Waite

Reputation: 98816

Ah yes — this shows a difference between CSS transitions and CSS animations.

CSS animations run once you’ve applied -webkit-animation-name to an element, i.e. they can run entirely from CSS.

Transitions, on the other hand, only run when you change the CSS property that they apply to. You can either do this via CSS pseudo-classes like :hover, or via JavaScript.

So, in order to make your transition work in browsers that don’t support -webkit-animation, you’ll need to run some JavaScript that changes the opacity of the image once a second — setInterval is your friend here.

(Note that your JavaScript won’t carry out the animation, it’ll just switch opacity straight from 1 to 0 and back again every second. The CSS transition will animate this change for you.)

Upvotes: 0

Related Questions