title: Can't stop animation at end of one cycle
body: <p>I'm making a CSS animation at the minute, and in it I'm moving stuff and want it to stay at the end position until the user moves their mouse away.</p>
  
  <pre><code>body {
      background: url('osx.jpg');
      padding: 0;
      margin: 0;
      line-height: 60px;
  }
  
  @-webkit-keyframes item1 {
      0% { bottom: -120px; left: 0px; }
      10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
      100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
      }
  
  @-webkit-keyframes item2 {
      0% { bottom: -120px; left: 0px; }
      10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
      100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
  }
  
  @-webkit-keyframes item3 {
      0% { bottom: -120px; left: 0px; }
      10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
      100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
  }
  
      div {
      position: relative;
      }
  #folder {
      width: 120px;
      margin: 0px auto;
  }
  
  #folder &gt; div {
      position: absolute; 
  }
  
  #folder:hover &gt; div:nth-of-type(1) {
      -webkit-animation-name: item1;
      -webkit-animation-duration: 10s;
  }
  
  #folder:hover &gt; div:nth-of-type(2) {
      -webkit-animation-name: item2;
      -webkit-animation-duration: 10s;
  }
  
  #folder:hover &gt; div:nth-of-type(3) {
      -webkit-animation-name: item3;
      -webkit-animation-duration: 10s;
  }
  </code></pre>
  
  <p>Whenever the animation ends though, it just repeats itself. I only want it to happen once and stay where it is until the user moves away. I tried using the paused thing from the spec but it doesn't work as I'd expect it to. Any help is appreciated. Thanks. :)</p>