CSS #keyframes won't work cross-browser - html

Question

I have this code for creating a slider image, but for some reason it won't work on both Chrome and FF, I've managed to make it work on one at a time, but not both...
here's the code:
//Works on FF atm//
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#-moz-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#-o-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}div#slider{
overflow: hidden;
}
div#slider figure img{
width: 20%;
float: left;
}
div#slider figure{
position: relative;
width: 500%;
margin: 0;
left:0;
font-size: 0;
-webkit-animation: slidy 5s infinite; /* Safari 4+ */
-moz-animation: slidy 5s infinite; /* Fx 5+ */
-o-animation: slidy 5s infinite; /* Opera 12+ */
animation: slidy 5s infinite; /* IE 10+ */
}
and the html:
<div id="slider">
<figure>
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto1.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto2.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto3.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto4.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto5.png" >
</figure>
</div>
Thanks !

Answer 1

Please refer to this JSFiddle code, I have checked in ipad2, ipad mini and ipad air, also on chrome on android mobile
<div id="slider">
<figure>
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
</figure>
</div>
I think you should cross check the photos you have uploaded, if they are accessible properly.
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto1.png" >
If you have any query then please modify the jsfiddle, and resend the link.
Regards D.