tabla - ¿Cómo prevenir la restauración de la animación css3 cuando haya terminado?

texto sale de div html

Question

Esta pregunta ya tiene una respuesta aquí:

• Detener una animación CSS3 en el último cuadro 8 respuestas

Escribo una animación css3 y solo se realiza una vez. La animación funciona bien, pero se reiniciará cuando finalice la animación. Cómo puedo evitar esto, quiero mantener el resultado en lugar de restablecerlo.

$(function() {
$("#fdiv").delay(1000).addClass("go");
});

#fdiv {
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
margin-top: -5px;
left: 50%;
top: 50%;
background-color: red;
}
.go {
-webkit-animation: spinAndZoom 1s 1;
}
@-webkit-keyframes spinAndZoom {
0% {
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
-webkit-transform: rotateZ(0deg);
}
100% {
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
-webkit-transform: rotateZ(360deg);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fdiv"></div>

Aquí está la demo .

Answer 1

Agregar animation-fill-mode: forwards;

a tu .go

El fotograma final de la animación continúa aplicándose una vez completada la iteración final de la animación.

http://css-infos.net/property/-webkit-animation-fill-mode

Answer 2

Agregar animación-llenar-modo: adelante;

.go {
-webkit-animation-fill-mode: forwards;
}

Answer 3

Agregue el siguiente estilo a su hoja de estilo:

.go {
/* Already exists */
-webkit-animation: spinAndZoom 1s 1;
/*New content */
-webkit-animation-fill-mode: forwards;
}