Question

I’d like to make a simple frame my frame slide show with CSS3.

I’d like to define how many times it’s goes through each frame. EG; Frame 3 / Last frame it just stops.

I’m finding ALOT of great CSS3 animation demos online; but not many about frame by frame slideshows.

EG: I Like this; http://mos.netmagazine.com/site/files/tutorials/assets/2011/08/animation_01.html — Though different in terms of animation – But I feel I can use @keyframes; Problem is – I’m trying it here vvv

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation1

This functionality is exactly what I want; except it wont let me replace the background: with an image? How could I do this; and last piece of the puzzle — how can I set a parameter for it to stop at a certain frame?

Final Note – This is for a iPad Website.

Answer 1

You can easily do with javascript or jquery but you cannot do it with CSS3. You can do like this:

#images { width: height: }
#images img { width: height: opacity=0; transition all 5s linear; -moz-transition all 5s linear; -o-transition all 5s linear; -webkit-transition all 5s linear; } 
#images img:target { opacity=1; }

<div id="images"> <img src="pic1" id="pic1"/> <img src="pic2" id="pic2"> <img src="pic3" id="pic3"/> . . . <img src="picn" id="picn"/> </div>
<div id="list"> <a href="#pic1">1</a> <a href="#pic2">2</a> <a href="#pic3">3</a> . . . <a href="#picn">n</a> </div>