jquery - 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？我觉得这样做比较好，兄弟...