I am currently using jQuery cycle for my slideshow. I want the numbers to stop and then roll whenever the next slide appears. I have the numbers rolling in an infinite sequence so they only fade in and out within the slideshow. However, I actually want to trigger the CSS animation with jQuery so that when the next slide comes, the numbers start rolling and then stop at the number I want. I hope I have made myself clear. Feel free to ask any questions. Thank you! http://jsfiddle.net/QGRv9/235/
Below is my CSS animation. The jQuery and HTML can be found 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;
}
}