webkit-animation is not working - html

Question

<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>
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.

Answer 1

You are missing keyframes, an at-rule that defines what your animation frames will be:
#keyframes mouseani {
0% { /* initial state */ }
/*
* intermediate states
*/
100% { /* final state */ }
}