title: CSS3 save position after animation
body: <p>i have a banner that move when i pass the mouse over it, and when the mouse exit, the banner go back to it's original position, i want to know how to make it stop at it's current position after animation (i don't want to reset each time ) </p>
  
  <p>this is how it moves : </p>
  
  <pre><code>  /*keyframe animations*/
  .first:hover {
      -webkit-animation: bannermove 30s linear infinite;
         -moz-animation: bannermove 30s linear infinite;
          -ms-animation: bannermove 30s linear infinite;
           -o-animation: bannermove 30s linear infinite;
              animation: bannermove 30s linear infinite;
  }
  
  @keyframes "bannermove" {
   0% {
      margin-left: 0px;
   }
   100% {
      margin-left: -2125px;
   }
  
  }
  
  
  @-webkit-keyframes "bannermove" {
   0% {
     margin-left: 0px;
   }
   100% {
     margin-left: -2125px;
   }
  
  }
  </code></pre>