html - webkit-animation is not working -

<style> .abc .abc-animation { position: relative; margin: 0 auto; width: 632px; height: 460px; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-color: transparent; background-image: url("http://zacharybrown.files.wordpress.com/2008/05/7-indians-chief.jpg"); }  .abc .ready .mouse { -webkit-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards; -moz-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards; -ms-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards; -o-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards; animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards; -webkit-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1); -moz-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1); -o-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1); -ms-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1); animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1); }  .abc .mouse { position: absolute; left: -9px; top: -9px; z-index: 10; display: inline-block; opacity: 0; width: 16px; height: 16px; background-color: #808080; border-radius: 18px; border: 2px solid #fff; -webkit-transform: translate(150px, 105px); -moz-transform: translate(150px, 105px); -o-transform: translate(150px, 105px); -ms-transform: translate(150px, 105px); transform: translate(150px, 105px); }  .abc .ready .mouse .click { -webkit-animation: mouseclick 8s 0s 1 normal forwards; -moz-animation: mouseclick 8s 0s 1 normal forwards; -o-animation: mouseclick 8s 0s 1 normal forwards; -ms-animation: mouseclick 8s 0s 1 normal forwards; animation: mouseclick 8s 0s 1 normal forwards; }  .abc .mouse .click { display: inline-block; opacity: 0; width: 6px; height: 6px; background-color: #fff; border-radius: 3px; position: absolute; left: 5px; top: 5px; }  .abc .ready .screen { opacity: 0; }  .abc .screen.one { z-index: 5; background-image: url("http://3.bp.blogspot.com/-2keuwmgpqlw/t4m3tjnnxdi/aaaaaaaabws/lry8lwqwwmg/s1600/da0087.jpg"); -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -o-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s; }  .abc .screen { width: 632px; height: 460px; background-position: 50% 50%; background-repeat: no-repeat; background-color: transparent; position: absolute; top: 0; left: 0; opacity: 1; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; -ms-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out; }  .abc .screen.two { z-index: 4; background-image: url("http://cloud3.faout.com/uploads/201208/heditor/201208171536178403.jpg"); -webkit-transition-delay: 5s; -moz-transition-delay: 5s; -o-transition-delay: 5s; -ms-transition-delay: 5s; transition-delay: 5s; }  .abc .screen.three { z-index: 3; background-image: url("http://blog.seattletimes.nwsource.com/seattlesketcher/linesmith-m.jpg"); -webkit-transition-delay: 8s; -moz-transition-delay: 8s; -o-transition-delay: 8s; -ms-transition-delay: 8s; transition-delay: 8s; } </style>  <article class="abc">       <div class="container clear">         <div class="abc-block browser">           <div class="browser-bar">             <div class="browser-button"></div>             <div class="browser-button"></div>             <div class="browser-button"></div>           </div>           <div class="browser-content">             <div class="abc-animation ready">               <div class="mouse"><span class="click"></span></div>               <div class="screen one"></div>               <div class="screen two"></div>               <div class="screen three"></div>               <div class="screen four"></div>             </div>           </div>         </div>               </div> </article> 

in above code want animate 1 circle dot moves @ 3 different place not working. what's wrong in above code? know such big code hope response , able solve problem.

you missing keyframes, at-rule defines animation frames be:

@keyframes mouseani {   0% { /* initial state */ }   /*    * intermediate states    */   100% { /* final state */ } }