title: Stop animation at end of a cycle
body: <p>The following code resets the animation to the first frame and repeats.  For some reason <code>animation-fill-mode:forwards;</code> is not working.</p>
  
  <p>I'm not sure if it has to do with the pixels or the top margins.</p>
  
  <p>Here is the link to my code. <a href="http://jsfiddle.net/HGHyQ/" rel="nofollow">http://jsfiddle.net/HGHyQ/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper_founded"&gt;
  &lt;div id="date_anim"&gt;
  &lt;span id="first_num"&gt;1 2&lt;/span&gt; 
  &lt;span id="second_num"&gt;6 7 8 9 0&lt;/span&gt;
  &lt;span id="third_num"&gt;1 2 3 4 5 6 7 1&lt;/span&gt;
  &lt;span id="fourth_num"&gt;4 5 6 7 8 9 0&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>