web-dev-qa-db-fra.com

Comment empêcher la réinitialisation de l'animation CSS3 lorsque vous avez terminé?

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 une fois l'animation terminée. Comment puis-je éviter cela, je veux conserver 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 .

csscss3css-animations
60
SPG

Ajouter animation-fill-mode: forwards;

à ton .go

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

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

114
Eric Hotinger

Ajoutez le style suivant à votre feuille de style:

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

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