CSS3 – ajoute une classe pour déclencher une animation et supprime une classe à la fin

J’ai une div et quand je clique dessus, jQuery ajoute une classe qui lance une animation en cours. Lorsque l’animation s’arrête (après 3 secondes), je souhaite que la classe soit supprimée afin que, lorsque l’utilisateur clique à nouveau sur la div, l’animation recommence.

Ceci n’est qu’un test et uniquement le navigateur Chrome pour le moment.

Voici mon CSS3:

.spin360 { -webkit-animation-name: spin; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-360deg); } } 

Voici mon script:

• Boutons suivant / précédent du curseur JQuery
• jQuery onclick addclass / removeclass et append un fondu
• jquery addClass et removeClass avec setInterval
• JQuery ajoutant une classe à un élément cloné
• Comment append une classe à une nouvelle ligne dans un jquery datatables?

  $(document).ready(function () { $('#spinButton').click(function () { $('#shape').addClass('spin360'); }); });  

Voici ce que j’ai essayé:

  $(document).ready(function () { $('#spinButton').click(function () { $('#shape').addClass('spin360').on('webkitAnimationEnd', function () { $('#shape').removeClass('spin360'); }); }); });  

Et

  $(document).ready(function () { $('#spinButton').click(function () { $('#shape').addClass('spin360'); }); $('#spinButton').addEventListener('webkitAnimationEnd', function (e) { $('#shape').removeClass('spin360'); }); });  

Dans tous les cas, mon animation s’exécute au premier clic, mais pas aux autres.

• jQuery addClass ne fonctionne pas
• jQuery performance, .css ou addClass
• différence entre toggleclass et addclass
• JQuery Find #ID, RemoveClass et AddClass
• Jquery Si l’élément a une classe qui commence par x, ne pas addClass

 $('#spinButton').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function (e) { $('#shape').removeClass('spin360'); });