At end of an animation display none

Hi,

I have an animation as an intro for a website. The animation is over the website and since i can't use z-index on it i use a wrapper to achieve it. My problem is that when the animation ends it needs to disappear so that the user can interact with the website.

So, the animation class is pelouse2 and the wrapper with the z-index is overlay. I'm thinking that what needs to happen is that when pelouse2 ends overlay disappear (display:none;).

I've tried doing this with javascript and and animationEnd, but it seems that animationEnd is not supported by edge animate. Is there an alternative event?

Here's my code.

HTML

<divclass="overlay">
  <divid="Stage"class="pelouse2"></div>
  <divclass="green"></div>
</div>

Javascript

<script>
   var myBox = document.getElementById('Stage');
   var overLay = document.getElementByClassName('overlay')[0];

  myBox.addEventListener('webkitAnimationEnd',function( event ){ overLay.style.display ='none';},false);
</script>

Thank you.