jquery循环和css webkit动画

Question

我使用jQuery循环进行幻灯片演示。我希望能够让数字停止，然后在下一张幻灯片出现时滚动。所以几乎在那里我有数字在无限的序列中滚动，所以它只能在幻灯片中淡入和淡出。但我实际上想用jquery触发css动画，所以当下一张幻灯片出现时，数字开始滚动，然后停在我想要的数字上。我试图让我的自我尽可能清楚。任何问题都欢迎。谢谢！ http://jsfiddle.net/QGRv9/235/

我在这里留下我的CSS动画。 jquery和html处于小提琴中。

#wrapper_founded #date_anim span#first_num { 
-moz-animation:first_num 6s infinite ease-in-out; 
-webkit-animation:first_num 6s infinite ease-in-out; 
animation:first_num 6s infinite ease-in-out; 

} 

@-moz-keyframes first_num { 
60% { 
    top:-61px; 
} 

80% { 
    top:-61px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

@-webkit-keyframes first_num { 
60% { 
    top:-61px; 
} 

80% { 
    top:-61px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

@keyframes first_num { 
60% { 
    top:-61px; 
} 

80% { 
    top:-61px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

    #wrapper_founded #date_anim span#second_num { 
-moz-animation:second_num 6s infinite ease-in-out; 
-webkit-animation:second_num 6s infinite ease-in-out; 
animation:second_num 6s infinite ease-in-out; 
} 

@-moz-keyframes second_num { 
60% { 
     top:-250px; 
} 

80% { 
     top:-250px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

@-webkit-keyframes second_num { 
60% { 
     top:-250px; 
} 

80% { 
     top:-250px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

@keyframes second_num { 
60% { 
    top:-250px; 
} 

80% { 
    top:-250px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

    #wrapper_founded #date_anim span#third_num { 
top:-381px; 
-moz-animation:third_num 6s infinite ease-in-out; 
-webkit-animation:third_num 6s infinite ease-in-out; 
animation:third_num 6s infinite ease-in-out; 
} 

@-moz-keyframes third_num { 
60% { 
    top:3px; 
} 

80% { 
    top:3px; 
} 

95% { 
    top:-381px; 
} 

100% { 
    top:-381px; 
} 
} 

@-webkit-keyframes third_num { 
60% { 
    top:3px; 
} 

80% { 
    top:3px; 
} 

95% { 
    top:-381px; 
} 

100% { 
    top:-381px; 
} 
} 

@keyframes third_num { 
60% { 
    top:3px; 
} 

85% { 
    top:3px; 
} 

95% { 
    top:-381px; 
} 

100% { 
    top:-381px; 
} 
} 

    #wrapper_founded #date_anim span#fourth_num { 
-moz-animation:fourth_num 6s infinite ease-in-out; 
-webkit-animation:fourth_num 6s infinite ease-in-out; 
animation:fourth_num 6s infinite ease-in-out; 
} 

@-moz-keyframes fourth_num { 
60% { 
    top:-377px; 
} 

80% { 
    top:-377px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

@-webkit-keyframes fourth_num { 
60% { 
    top:-377px; 
} 

80% { 
    top:-377px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

@keyframes fourth_num { 
60% { 
    top:-377px; 
} 

80% { 
    top:-377px; 
} 

95% { 
    top:0; 
} 

100% { 
    top:0; 
} 
} 

Answer 1

你为什么不试试Cycle2？我认为最好这样做，兄弟...