Comment empêcher l'animation css3 de se réinitialiser une fois terminée ?

Question

J'écris une animation css3 et elle n'est exécutée qu'une seule fois. L'animation fonctionne bien, mais elle se réinitialise lorsque l'animation est terminée. Comment puis-je éviter cela, je veux garder le résultat au lieu de le réinitialiser.

$(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>

Voici le Démo .

Answer 1

Ajouter animation-fill-mode: forwards;

à votre .go

L'image clé finale de l'animation continue de s'appliquer après la fin de la dernière itération de l'animation.

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

Answer 2

Ajoutez le style suivant à votre feuille de style :

.go {
     /* Already exists */
     -webkit-animation: spinAndZoom 1s 1;

     /*New content */
     -webkit-animation-fill-mode: forwards;
 }

Answer 3

Ajouter animation-fill-mode : forwards ;

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