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 cómo puedo detenerlo en su último marco CSS (100%) , o cómo deshacerse de todo el div en el que se encuentra una vez que se 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); }
}

Estas buscando:

animation-fill-mode: forwards;

Más información sobre MDN y la lista de soporte del navegador en canIuse .

Si desea agregar este comportamiento a una animationdefinición de propiedad abreviada , el orden de las subpropiedades es el siguiente

animation-name- predeterminado none

animation-duration- predeterminado 0s

animation-timing-function- predeterminado ease

animation-delay- predeterminado 0s

animation-iteration-count- predeterminado 1

animation-direction- predeterminado normal

animation-fill-mode- necesitas configurar esto en forwards

animation-play-state- predeterminado running

Por lo tanto, en el caso más común, el resultado será algo como esto

animation: colorchange 1s ease 0s 1 normal forwards;

Vea la documentación de MDN aquí

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Soporte de navegador

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5.0 -moz-)
• Shafari 4.0 -kit web-
• Opera 15.0 -webkit- (12.112.0 -o-)

Uso:-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

La mejor manera parece poner el estado final en la parte principal de css. Al igual que aquí, pongo ancho 220px, para que finalmente se convierta 220px. Pero empezando a0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

No es su problema que esté configurando el webkitAnimationName de nuevo a nada, por lo que está restableciendo el CSS para su objeto a su estado predeterminado. ¿No se quedará donde terminó si simplemente elimina la función setTimeout que restablece el estado?

Acabo de publicar una respuesta similar, y probablemente quieras echar un vistazo a:

http://www.w3.org/TR/css3-animations/#animation-events-

Puedes descubrir aspectos de una animación, como iniciar y detener, y luego, una vez que digas que el evento 'detener' se ha disparado, puedes hacer lo que quieras con el dom. Probé esto hace algún tiempo, y puede funcionar, pero supongo que por el momento estarás restringido a webkit (pero probablemente ya lo hayas aceptado). Por cierto, desde que publiqué el mismo enlace para 2 respuestas, ofrecería este consejo general: echa un vistazo al W3C: prácticamente escriben las reglas y describen los estándares. Además, las páginas de desarrollo de webkit son bastante clave.

Nadie realmente lo trajo así, la forma en que se hizo funcionar es la animación-reproducción-estado en pausa.

Hoy aprendí que hay un límite que desea usar para el modo de relleno. Esto es de un desarrollador de Apple. El rumor es * alrededor de * seis, pero no es seguro. Alternativamente, puede establecer el estado inicial de su clase a cómo desea que termine la animación, luego * inicializarla * desde / 0%.