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？我認爲最好這樣做，兄弟...