title: Stopping a CSS3 Animation on last frame
body: <p>I have a 4 part CSS3 animation playing on click  - but the last part of the animation is meant to take it off the screen. </p>
  
  <p>However, it always goes back to its original state once it has played. Anyone know how I can <strong>stop it on its last css frame (100%)</strong>, or else how to get rid of the whole div it is in once it has played. </p>
  
  <pre><code>@keyframes colorchange {
    0%   { transform: scale(1.0) rotate(0deg); }
    50%  { transform: rotate(340deg) translate(-300px,0px) }
    100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
  }
  </code></pre>