CSS Keyframes

[Spunky]

Hey guys, so I recently decided to dive into the use of keyframes for CSS3. I first looked at the tutorial on w3schools and I find it to be very simple to understand, I love it. Only problem is, I found a CSS Slider that uses keyframes and for some reason I can't understand how to edit it to reduce or even add how many images it holds. I swear I got rid of everything that even mentions a fifth cycle and it still cycles through it even though it is blank. I just need a little help understanding keyframes I suppose.

 #slider li.firstanimation {-moz-animation:cycle 20s linear infinite;-webkit-animation:cycle 20s linear infinite;}#slider li.secondanimation {-webkit-animation:cycletwo 20s linear infinite;}#slider li.thirdanimation {-webkit-animation:cyclethree 20s linear infinite;}#slider li.fourthanimation {-webkit-animation:cyclefour 20s linear infinite;}/*#slider li.fifthanimation {-webkit-animation:cyclefive 20s linear infinite;}*/ @-webkit-keyframes cycle {0%  { left:0px; }4%  { left:0px; }16% { left:0px; opacity:1; z-index:0; }20% { left:482px; opacity:0; z-index:0; }21% { left:-482px; opacity:0; z-index:-1; }50% { left:-482px; opacity:0; z-index:-1; }92% { left:-482px; opacity:0; z-index:0; }96% { left:-482px; opacity:0; }100%{ left:0px; opacity:1; } }@-webkit-keyframes cycletwo {0%  { left:-482px; opacity:0; }16% { left:-482px; opacity:0; }20% { left:0px; opacity:1; }24% { left:0px; opacity:1; }36% { left:0px; opacity:1; z-index:0; }40% { left:482px; opacity:0; z-index:0; }41% { left:-482px; opacity:0; z-index:-1; }100%{ left:-482px; opacity:0; z-index:-1; }}@-webkit-keyframes cyclethree {0%  { left:-482px; opacity:0; }36% { left:-482px; opacity:0; }40% { left:0px; opacity:1; }44% { left:0px; opacity:1; }56% { left:0px; opacity:1; z-index:0; }60% { left:482px; opacity:0; z-index:0; }61% { left:-482px; opacity:0; z-index:-1; }100%{ left:-482px; opacity:0; z-index:-1; }}@-webkit-keyframes cyclefour {0%  { left:-482px; opacity:0; }56% { left:-482px; opacity:0; }60% { left:0px; opacity:1; }64% { left:0px; opacity:1; }76% { left:0px; opacity:1; z-index:0; }80% { left:482px; opacity:0; z-index:0; }81% { left:-482px; opacity:0; z-index:-1; }100%{ left:-482px; opacity:0; z-index:-1; }}/*@-webkit-keyframes cyclefive {0%  { left:-482px; opacity:0; }76% { left:-482px; opacity:0; }80% { left:0px; opacity:1; }84% { left:0px; opacity:1; }96% { left:0px; opacity:1; z-index:0; }100%{ left:482px; opacity:0; z-index:0; }}*/

*Only showing -webkit- so this is as short as possible. I even reduced the length from 25 seconds to 20 seconds because each image is supposedly 5 seconds in length. The full code and explanation of it is located here: http://coding.smashi...ling-slideshow/ I've also found code that reuses the keyframes code for each cycle, maybe more efficient, but I want to understand this code first. If I can't figure it out by editing I might just try to build it from scratch, it seems simple enough. That's the problem though, it seems simple, I just must be missing something small.

[Spunky]

Ok I guess generally what I am asking is exactly what the keyframes are doing? I could get rid of all but the first cycle and the thing will still 'cycle' 5 times before returning to the first image. Im having a hard time understanding what causes that and how it knows to return to the first image.