Detener una animación CSS3 en el último fotograma

Tengo una animación CSS3 de 4 partes que se reproduce al hacer clic, pero la última parte de la animación está destinada a sacarla de la pantalla.

Sin embargo, siempre vuelve a su estado original una vez que ha jugado. Alguien sabe como puedodetenerlo en su último marco CSS (100%), o bien, cómo deshacerse de todo el div en el que se encuentra una vez que ha jugado

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

Respuestas a la pregunta(8)

Su respuesta a la pregunta