user2195574 user2195574 - 2 years ago 158
CSS Question

CSS Multiple Image Crossfade

I've been searching for a few hours for the answer to this and I've still not come up with anything that really works!

I have a

that contains 3
elements. I want to fade each to the next in an infinite loop.

I know it's likely to include animations but I can't understand exactly how the work and what bits I need to change to adapt the fading to what I require.

Thanks for any help guys! I really appreciate this, just trying to figure this out as I've used .gifs before and I feel it's time to move on!

Just in case you do want the code:

<div id="showcase">
<img src="../images/showcase/iphone2.png" width="175" height="202" />
<img src="../images/showcase/m4.png" width="175" height="202" />
<img src="../images/showcase/alloy.png" width="175" height="202" />

As I said, I've looked at numerous examples and I'm just looking for a basic fade from one to the other using CSS. I would prefer not to use JavaScript.

Answer Source

try using css animations:

Note: This will not work with non css3 browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download