jQuery周期和CSS Webkit动画

Question

Im using jquery cycle for the slideshow. i want to be able to have the numbers stop and then roll whenever the next slide comes. so is almost there i have the numbers rolling in a infinite sequence so it only fades in and out within the slideshow. but i actually want to trigger the css animation with jquery so when the next slide comes the numbers starts rolling and then stop at the number i want. im trying to make my self as clear as possible. any questions are welcome. thanks! http://jsfiddle.net/QGRv9/235/

I LEAVE MY CSS ANIMATION here. the jquery and html is in the fiddle.

 #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

Why don't you try Cycle2? I think it's better to do that, bro...