Mantener el estado final al final de una animación CSS3

301

Estoy ejecutando una animación en algunos elementos configurados opacity: 0;en CSS. La clase de animación se aplica en Click, y, usando fotogramas clave, cambia la opacidad de 0a 1(entre otras cosas).

Desafortunadamente, cuando termina la animación, los elementos vuelven a opacity: 0(tanto en Firefox como en Chrome). Mi pensamiento natural sería que los elementos animados mantienen el estado final, anulando sus propiedades originales. ¿No es esto cierto? Y si no, ¿cómo puedo obtener el elemento para hacerlo?

El código (versiones prefijadas no incluidas):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
css css-animations Dan
fuente
1
Publicaré mi propio aviso de repetición: stackoverflow.com/questions/9196694/css3-animation-scale ¡ Al menos el mío tiene un título más instructivo!
Dan
posible duplicado de CSS3 Animate: ¿Cómo hacer que el objeto no vuelva a su posición inicial después de que se haya ejecutado la animación?
Michael Mullany

Respuestas:

530

Intenta agregar animation-fill-mode: forwards;. Por ejemplo así:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
Christofer Vilander
fuente
1
SIP eso es. Comprobaré tu respuesta cuando pueda. Si algún CSS-heads quiere comentar sobre la lógica detrás de eso, ¡me encantaría saberlo!
Dan
8
Puede leer acerca de la propiedad animation-fill-mode aquí: dev.w3.org/csswg/css3-animations/#animation-fill-mode-property ¡ Espero que ayude!
Christofer Vilander
66
@Dan, el forwardsvalor de la animation-fill-modepropiedad se asegura de que el elemento contenga el último estado de fotograma clave de la animación una vez que finaliza la animación. por ejemplo, si su animación cambia widthde 0 a 100 px, esta propiedad se asegura de que el elemento permanezca 100 px de ancho después de que finalice la animación.
Farzad YZ
55
no olvides especificar el 100% / topunto, de lo @keyframecontrario no funcionará.
Tomasz Mularczyk
modo de relleno de animación: los forwards también hicieron el truco para mí, pero solo después de agregar el imperativo '! important' a la regla
shayuna
26

Si está utilizando más atributos de animación, la abreviatura es:

animation: bubble 2s linear 0.5s 1 normal forwards;

Esto da:

  • 2s duración
  • linear función de temporización
  • 0.5s retrasar
  • 1 recuento de iteraciones (puede ser infinito)
  • normal dirección
  • forwards modo de relleno (establecido hacia atrás si desea tener compatibilidad para usar la posición final como estado final)
agiopnl
fuente
14

SI NO UTILIZA LA VERSIÓN DE MANO CORTA: Asegúrate de que animation-fill-mode: forwardsesté DESPUÉS de la declaración de animación o no funcionará ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Taylor A. Leach
fuente
1
Tienes razón. Actualicé mi respuesta. Gracias, se me pasó por la cabeza jaja.
Taylor A. Leach
4

Utilice el modo de relleno de animación: hacia adelante;

animation-fill-mode: forwards;

El elemento retendrá los valores de estilo establecidos por el último fotograma clave (depende de la dirección de animación y del recuento de iteraciones de animación).

Nota: La regla @keyframes no es compatible con Internet Explorer 9 y versiones anteriores.

Ejemplo de trabajo

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
Expandir fragmento

Deepu Reghunath
fuente