CSS animations triggers eventListeners more than once in microsoft Edge

The situation is that I'm customizing a third party web platform made with React. It allows to add a CSS and JS file to which will be loaded after the webpage rendering to customize the interface.

The problem is that some content is generated dynamically, so the Javascript code is applied just once at the first, but not for the future nested elements.

Given CSS is applyed always, I set animations for that dynamic elements which will be listened from JS code with eventListeners and triggered for each of them, like with MutationObserver.

The problem: It works like a charm in all browsers except in Edge which make trigger that functions at least 4 times, but i need just once. It calls 4 times even if i parametrize eventListener with once attribute. But, why? Or how to avoid it in Edge?

The CSS code for the animation:

@keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
  } 
}

@-moz-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
}  
}

@-webkit-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
}  
}

@-ms-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
  } 
}

@-o-keyframes messageModalShown {  
  from {  
    outline-color: rgba(255, 255, 255, .1); 
  }
  to {  
    outline-color: rgba(255, 255, 255, 0);
  } 
}

#compose-new-message .compose_form{
  animation-name: messageModalShown;
  -o-animation-name: messageModalShown;
  -ms-animation-name: messageModalShown;
  -moz-animation-name: messageModalShown;
  -webkit-animation-name: messageModalShown;
}

The JS code:

(function(){
            try{
            var count = 1,
                event = function(event){
                    if (event.animationName == 'messageModalShown') {
                        //MY CODE that triggers 4 times in EDGE
                    }
                }

            document.addEventListener('animationstart', event, false);
            document.addEventListener('MSAnimationStart', event, false);
            document.addEventListener('webkitAnimationStart', event, false);
            } catch(err){}
        })();