Detener una animación CSS3 en el último fotograma


181

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

Hola Nick, ¿puedes publicar el CSS y HTML que estás utilizando?
Sebastian Patane Masuelli

Hola Sebastián, he actualizado mi pregunta con css y javascript. El único html que estoy usando es un div con un clic para iniciar la función de rotación.
user531192

Respuestas:


376

Estas buscando:

animation-fill-mode: forwards;

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


8
¿Sabes si eso funciona en cromo? No tener suerte con eso
user531192

44
Acepta esto como la respuesta correcta. Más explicación en este caso: 4waisenkinder.de/blog/2014/10/13/...
Miron

@ user531192 Para los navegadores Chrome / Webkit que tiene que usar -webkit-animation-fill-mode: forwards;
eivindml

Chrome ya no necesita el prefijo -webkit- (al menos desde v49)
Cápsula

1
Un problema que tuve con esto fue que no tenía un 100% {}o to {}set, por lo que incluso con animation-fill-mode: forwards;mi animación todavía me dejaría 0%. (Estaba usando algunos bucles @for para crear mis animaciones y olvidé agregar manualmente un from{}y to{});
Phil Tune

25

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í


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

5

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

Esto es genial, creo que es la mejor manera de lidiar con este problema.
Drew Baker, el

Si utiliza un retraso de animación, comienza con el estado final, se restablece al 0% y luego se anima al 100%. No es ideal y visualmente discordante.
Deborah hace

3

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?


1

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.



-2

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.