user2195574 user2195574 - 1 month ago 22
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

div
that contains 3
img
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" />
</div>


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

try using css animations: http://www.w3schools.com/css3/css3_animations.asp

Note: This will not work with non css3 browsers.