Trouble with CSS animation in Firefox and Internet Explorer -

i know has been answered somewhere else, can't seem find solution , implement it. have , css slider animation works in safari , chrome not in firefox , ie. have tried use vendor selectors doing wrong. first time code , given week class. last thing have do. how can animation work in ie , firefox?

you can visit site here.

here html

<div id="captioned-gallery">             <figure class="slider">                 <figure>                     <img src="images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="photo of hungarian sausage goulash"/>                         <figcaption class="slider2">hungarian sausage goulash</figcaption>                 </figure>                 <figure>                     <img src="images/g-lasagne-al-forno.jpg" width="600" height="400" alt="photo of lasagne al forno"/>                         <figcaption class="slider2">lasagna al forno</figcaption>                 </figure>                 <figure>                     <img src="images/5357829-svickova.jpg" width="600" height="400" alt="photo of svickova"/>                         <figcaption class="slider2">svickova</figcaption>                 </figure>                 <figure>                     <img src="images/pork shoulder.jpg" width="600" height="400" alt="photo of pork shoulder dumplings"/>                         <figcaption class="slider2">pork shoulder dumplings</figcaption>                 </figure>                 <figure>                     <img src="images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="photo of hungarian sausage goulash"/>                         <figcaption class="slider2">hungarian sausage goulash</figcaption>                 </figure>             </figure> 

and css

div#captioned-gallery {     width: 100%;     max-width: 600px;     margin: 10px;     overflow: hidden;     float: left;     height: auto; }  figure {     margin: 0; }  figure.slider {     position: relative;     width: 500%;     font-size: 0;     -webkit-animation: 20s slidy ease-in-out infinite;     -moz-animation: 20s slidy ease-in-out infinite;     -ms-animation: 20s slidy ease-in-out infinite;     animation: 20s slidy ease-in-out infinite; }  figure.slider figure      {         width: 20%;          height: auto;         display: inline-block;         position: inherit; }  figure.slider img     {          width: 100%;         height: auto;  }  @-webkit-keyframes slidy {     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 {     20% { left: 0%; }     25% { left: -100%; }     45% { left: -100%; }     50% { left: -200%; }     70% { left: -200%; }     75% { left: -300%; }     95% { left: -300%; }     100% { left: -400%; } }  @-ms-keyframes slidy {     20% { left: 0%; }     25% { left: -100%; }     45% { left: -100%; }     50% { left: -200%; }     70% { left: -200%; }     75% { left: -300%; }     95% { left: -300%; }     100% { left: -400%; } } 

thanks in advance help!

for firefox use -moz- , follow following order. 1 more thing animation supported in ie 10+ versions microsoft. see reference

@-moz-keyframes slidy {     20% { left: 0%; }     25% { left: -100%; }     45% { left: -100%; }     50% { left: -200%; }     70% { left: -200%; }     75% { left: -300%; }     95% { left: -300%; }     100% { left: -400%; } }  @-ms-keyframes slidy {     20% { left: 0%; }     25% { left: -100%; }     45% { left: -100%; }     50% { left: -200%; }     70% { left: -200%; }     75% { left: -300%; }     95% { left: -300%; }     100% { left: -400%; } }  @-webkit-keyframes slidy {     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 {     20% { left: 0%; }     25% { left: -100%; }     45% { left: -100%; }     50% { left: -200%; }     70% { left: -200%; }     75% { left: -300%; }     95% { left: -300%; }     100% { left: -400%; } } 

and update css given below:

figure.slider {     position: relative;     width: 500%;     font-size: 0;      -moz-animation-duration: 20s;     -moz-animation-name: slidy;     -moz-animation-iteration-count: infinite;     -moz-animation-direction: alternate;     -moz-animation-timing-function: ease-in-out;      -webkit-animation-duration: 20s;     -webkit-animation-name: slidy;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: alternate;     -webkit-animation-timing-function: ease-in-out;      -ms-animation-duration: 20s;     -ms-animation-name: slidy;     -ms-animation-iteration-count: infinite;     -ms-animation-direction: alternate;     -ms-animation-timing-function: ease-in-out;      animation-duration: 3s;     animation-name: slidy;     animation-iteration-count: infinite;     animation-direction: alternate;     animation-timing-function: ease-in-out; }