Stop animation at end of a cycle

Question

The following code resets the animation to the first frame and repeats. For some reason animation-fill-mode:forwards; is not working.

I'm not sure if it has to do with the pixels or the top margins.

Here is the link to my code. http://jsfiddle.net/HGHyQ/

HTML

<div id="wrapper_founded">
<div id="date_anim">
<span id="first_num">1 2</span> 
<span id="second_num">6 7 8 9 0</span>
<span id="third_num">1 2 3 4 5 6 7 1</span>
<span id="fourth_num">4 5 6 7 8 9 0</span>
</div>
</div>

CSS

#wrapper_founded {
position:relative;
width:100%;
float:left;
}

#wrapper_founded h3 {
padding:0 60px;
}

#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;

}

#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}

 #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;
}
}

  #wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:143px;
display:block;
margin:0 auto 35px;
}

Answer 1

The main issue is that the keyframes sections need to run from 0%-100% instead of 60%-100%. I have found that using the from and to blocks instead of the percentages to be the easiest way of getting a smooth and consistent animation.

In addition, I removed the infinite repeat and re-added the three flavors of animation-fill-mode:forwards. (Tested in Chrome and IE)

Fiddle: http://jsfiddle.net/hzNad/

#wrapper_founded {
position:relative;
width:100%;
float:left;
}

#wrapper_founded h3 {
padding:0 60px;
}

#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;

}

#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}

 #wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:first_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:first_num 6s ease-in-out;
animation-fill-mode:forwards;
}

@-moz-keyframes first_num {
    from {top: 0px;}
    to {top: -61px;}
}

@-webkit-keyframes first_num {
    from {top: 0px;}
    to {top: -61px;}
}

@keyframes first_num {
    from {top: 0px;}
    to {top: -61px;}
}

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

@-moz-keyframes second_num {
    from {top: 0px;}
    to {top: -250px;}
}

@-webkit-keyframes second_num {
    from {top: 0px;}
    to {top: -250px;}
}

@keyframes second_num {
    from {top: 0px;}
    to {top: -250px;}
}

  #wrapper_founded #date_anim span#third_num {
-moz-animation:third_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:third_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:third_num 6s ease-in-out;
animation-fill-mode:forwards;
}

@-moz-keyframes third_num {
    from {top: -381px;}
    to {top: 0px;}
}

@-webkit-keyframes third_num {
    from {top: -381px;}
    to {top: 0px;}
}

@keyframes third_num {
    from {top: -381px;}
    to {top: 0px;}
}

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

@-moz-keyframes fourth_num {
    from {top: 0px;}
    to {top: -377px;}
}

@-webkit-keyframes fourth_num {
    from {top: 0px;}
    to {top: -377px;}
}

@keyframes fourth_num {
    from {top: 0px;}
    to {top: -377px;}
}

  #wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:140;
display:block;
margin:0 auto 35px;
}