CSS Keyframe not working with CSS image slideshow - html

Question

i am trying to get a css slideshow working and i cannot see why it is not. The fault is in the keyframes. I am trying to get the images to come down from the top mask, and then once hidden, the previous image will go back up into the mask. This only works on keyframes 1 and 2. I cannot see why. My coursework deadline is soon, please help!
CSS code:
#content {
background-color: white;
/* border: 1px solid black; */
padding: 0;
width: 100%;
-webkit-box-shadow: 0px 0px 30px 4px #acafb3;
-moz-box-shadow: 0px 0px 30px 4px #acafb3;
box-shadow: 0px 0px 30px 4px #acafb3;
}
#slider {
background-image: url('images/ssgbritain.jpg');
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 265px;
width: 998px;
overflow: visible;
position: relative;
}
#fig-container {
margin:0;
padding:0;
position:relative;
}
#mask {
overflow: hidden;
height: 270px;
}
#slider figure {
width: 998px;
/* Width Image */
height: 265px;
/* Height Image */
position: absolute;
top: -270px;
/* Original Position - Outside of the Slider */
}
figure:nth-child(1) {
animation:cycle 25s linear infinite;
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
figure:nth-child(2) {
animation:cycle2 25s linear infinite;
-moz-animation:cycle2 25s linear infinite;
-webkit-animation:cycle2 25s linear infinite;
}
figure:nth-child(3) {
animation:cycle3 25s linear infinite;
-moz-animation:cycle3 25s linear infinite;
-webkit-animation:cycle3 25s linear infinite;
}
figure:nth-child(4) {
animation:cycle4 25s linear infinite;
-moz-animation:cycle4 25s linear infinite;
-webkit-animation:cycle4 25s linear infinite;
}
figure:nth-child(5) {
animation:cycle5 25s linear infinite;
-moz-animation:cycle5 25s linear infinite;
-webkit-animation:cycle5 25s linear infinite;
}
#keyframes cycle {
0% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
#keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
#keyframes cycle4 {
0% {
top: -270px;
}
52% {
top: -270px;
}
56% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle4 {
0% {
top: -270px;
}
56% {
top: -270px;
}
60% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle5 {
0% {
top: -270px;
}
68% {
top: -270px;
}
72% {
top: 0px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle5 {
0% {
top: -270px;
}
76% {
top: -270px;
}
80% {
top: 0px;
}
92% {
top: 0px;
}
96 % {
top: -270px;
}
100% {
top: -270px;
}
}`
HTML code:
<div id="content">
<div id="slider">
<div id="mask">
<div id="fig-container">
<figure>
<img src="http://coursework/web/images/shopping.jpg" alt="Shopping centre" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/ssgbritain.jpg" alt="SS Great Britain" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/susbridge.jpg" alt="Suspension Bridge" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/xmasmarket.jpg" alt="Suspension Bridge" />
<figcaption>rger</figcaption>
</figure>
</div>
</div>
</div>
P.s ignore the bad positioning of the image, seems to only be like that on jsfiddle.

Answer 1

Check this fiddle
You have errors in your css!! Simple as that, just checking the identation you will figure it out.
#-webkit-keyframes cycle3 is never closing!
#keyframes cycle {
0% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle4 {
0% {
top: -270px;
}
52% {
top: -270px;
}
56% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle4 {
0% {
top: -270px;
}
56% {
top: -270px;
}
60% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle5 {
0% {
top: -270px;
}
68% {
top: -270px;
}
72% {
top: 0px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle5 {
0% {
top: -270px;
}
76% {
top: -270px;
}
80% {
top: 0px;
}
92% {
top: 0px;
}
96% {
top: -270px;
}
100% {
top: -270px;
}
}