Detener una animación CSS3 en el último fotogtwig

Tengo una animación de 4 partes de CSS3 que se reproduce al hacer clic, pero la última parte de la animación tiene como objective sacarla de la pantalla.

Sin embargo, siempre vuelve a su estado original una vez que se ha reproducido. Alguien sabe cómo puedo detenerlo 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); } } 

Estas buscando:

 animation-fill-mode: forwards; 

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

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

animation-name predeterminado none

animation-duration0s predeterminado

animation-timing-functionease defecto

animation-delaydefault 0s

animation-iteration-countdefault 1

animation-directionpredeterminado normal

animation-fill-modenecesitas configurar esto para forwards

animation-play-staterunning predeterminada

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 del navegador

  • Chrome 43.0 (4.0 -webkit-)
  • IE 10.0
  • Mozilla 16.0 (5.0 -moz-)
  • Shafari 4.0 -webkit-
  • 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 forma parece poner el estado final en la parte principal de css. Al igual que aquí, puse ancho a 220px , por lo que finalmente se convierte en 220px . Pero comenzando a 0px;

 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 en la nada, por lo que está restableciendo el CSS de su objeto a su estado predeterminado. ¿No se quedará donde terminó si solo eliminas la función setTimeout que está restableciendo el estado?

Acabo de publicar una respuesta similar, y es probable que desee 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 dices que se ha disparado el evento ‘detener’, puedes hacer lo que quieras con la dom. Probé esto hace un tiempo, y puede funcionar, pero supongo que por el momento estarás restringido al webkit (pero probablemente ya lo hayas aceptado). Por cierto, ya que he publicado el mismo enlace para 2 respuestas, ofrezco este consejo general: echa un vistazo al W3C: escriben las reglas y describen los estándares. Además, las páginas de desarrollo de webkit son muy importantes.

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

Hoy aprendí que hay un límite que quieres 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 * initialize * it desde / 0%.