title: Run a method inside an animation or run a method between two animations
body: <p>How can I run a method inside and animation? or run two animations and a method between them? I'm trying to add a div then change it opacity from 0 to 1, than run a method and then change the opacity again from 1 to 0, some kind of load screen.
  I just tried to divide the animation and method in two and use eventlisteners with "animation end" but doesn't work properly (just works the first run, the second time the changeScreen method is used the classList say is null the error says: "Uncaught TypeError: Cannot read property 'classList' of null
      at HTMLDivElement." in document.querySelector("#screen").classList.remove("screenOff");)</p>
  
  <p>here the methods:</p>
  
  <pre><code>const screen = document.createElement('div'); //Const to add the load screen 
  
  screen.id = 'screen';
  
  function changeScreen(token){
  
  document.body.prepend(screen);
  document.querySelector("#screen").classList.add("screenOff");
  document.querySelector("#screen").addEventListener("animationend", function(){
      loadScreen(loadFile(token));
      document.querySelector("#screen").classList.remove("screenOff"); 
      document.querySelector("#screen").removeEventListener("animationed", null);
      retrieveScreen();
  },false);
  }
  
  function retrieveScreen(){
  
  document.querySelector("#screen").classList.add("screenOn");
  document.querySelector("#screen").addEventListener("animationend", function(){
      document.querySelector("#screen").classList.remove("screenOn"); 
      document.querySelector("#screen").removeEventListener("animationed", null);
      screen.remove();
  },false);
  }
  </code></pre>
  
  <p>the method obtain a token (number) then I add a div element called screen to the body and add the class screenOff, this starts the animation of the div to turn black. Then with the event listener I expect that when the screen is balck the method loadScreen do the changes, then I wanted that the class changes to screen on to turn the div from black to opacity 0 and in the end remove the div from screen. 
  All works except that the remove stops the second animation and without it the div will be there blocking the way, this method should be executed many times doing the same thing.</p>
  
  <p>If there is a way to execute the method loadScreen inside in just one animation example:</p>
  
  <pre><code>0% {opacity: 0;} 
  50% {opacity: 1;} 
   ----- run loadScreen() then -----
  50% {opacity: 1; }
  100% {opacity: 0;}
  </code></pre>
  
  <p>would be nice ... </p>