para - Detener una animación CSS3 en el último fotograma

animation css examples

Question

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

Answer 1

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

Answer 2

¿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?

Answer 3

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.

Answer 4

Estas buscando:

animation-fill-mode: forwards;

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

Answer 5

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%.

Answer 6

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

Answer 7

Nadie realmente lo trajo así, la forma en que se hizo funcionar es animation-play-state configurado en pausa.

Answer 8

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-duration - 0s predeterminado

animation-timing-function - ease defecto

animation-delay - default 0s

animation-iteration-count - default 1

animation-direction - predeterminado normal

animation-fill-mode - necesitas configurar esto para forwards

animation-play-state - running 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í