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.
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; }