webkit-animation is not working

[duren]

\[code\]<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: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;transition: all 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>\[/code\]In above code i want to animate one circle dot which moves at three different place but it not working. so what's wrong in above code?i know such a big code but i hope will get some good response and will be able to solve my problem.