Comment empêcher l’animation de css3 réinitialisée une fois 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éinitialisera à la fin de l’animation. 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); } } 
  

Voici la démo .

Ajouter animation-fill-mode: forwards;

à votre .go

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

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

Ajoutez le style suivant à votre feuille de style:

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

Ajouter animation-fill-mode: en avant;

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