Déclenchement d'animation CSS en JS

Bonjour,

Je cherche un moyen d'exécuter une animation CSS d'une image 2 au moment ou l'animation d'une image 1 passe à 100%.
J'ai réussi à exécuter l'animation à chaque itération, mais étant donné que l'animation de l'image 1 est en "alternate", l'animation 2 se lance quand l'animation 1 est à 100% ET à 0%.
Ma méthode a été d'ajouter une classe contenant l'animation voulue à l'image 2 à chaque itération de l'image 1.

Dans mon code CSS, l'image 1 a l'ID "fumeeBlanche", l'image 2 à l'ID "fumeeRouge", la classe ajoutée est "explosion".

Mon code CSS :

#fumeeBlanche
{
  width: 450px;
  position: absolute;
  bottom: 50px;
  right: 250px;
  z-index: 1;
  -webkit-animation: fumee 5s 2s infinite alternate;
  	      animation: fumee 5s 2s infinite alternate;
  transform: scale(0);
}
#fumeeRouge
{
  width: 420px;
  position: absolute;
  bottom: 380px;
  right: 265px;
  z-index: 0;
  opacity: 0;
}
.explosion
{
  animation: fumee2 0.5s 2 alternate;
}
@keyframes fumee {
  0% {
    -webkit-transform: translateY(240px) scale(0);
            transform: translateY(240px) scale(0);
  }
  100% {
    -webkit-transform: translateY(-350px) scale(1);
            transform: translateY(-350px) scale(1);
  }
}

Mon code JS (en jQuery):

$('#fumeeBlanche').on("animationiteration", function() {
  $('#fumeeRouge').addClass("explosion");
  $('#fumeeRouge').on("animationend", function() {
    $('#fumeeRouge').removeClass("explosion");
  })
})

Voilà si quelqu'un peut m'aider, en résumé je veux qu'une itération sur 2 de l'animation 1 soit prise en compte dans le déclenchement de l'animation 2.

Merci d'avance.

Bonjour TibereMMI,

A tester, mais je pense que cela doit ressembler à cela

var bImpaire = false;//variable globale
$('#fumeeBlanche').on("animationiteration", function() {
  console.log( bImpaire);
  if(bImpaire){
     //action
  }
 //On inverse 
  bImpaire = !bImpaire;
})