webkit动画不起作用

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> 

在上面的代码中，我想要动画一个圆点在三个不同的地方移动，但它不工作。所以上面的代码有什么问题？ 我知道这么大的代码，但我希望能得到一些很好的回应，并能解决我的问题。

Answer 1

你缺少关键帧，一个在规则定义你的动画帧将是什么：

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