Stopping a CSS3 Animation on last frame

by

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.

However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played. 

@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); }
}

8 Answers
8

Leave a Comment