Sliding up and sliding down overlay on button click problem javascript, css

So I would like to make an overlay with a black background and with a text that slides down from top to center(using the @-webkit-keyframes with the from,to method containing translate() css events) when clicking on a font awesome youtube icon and then make it slide from center to top when clicking on a font awesome checkbox(using the onclick="myFunction()" html argument) that is under the overlay text, I suceeded at making the part where I click on the font awesome youtube icon and the black overlay pops up and the text slides down with a nice transition but i can't make it slide up when clicking the font awesome checkbox.

I tried using this article to make the center to top transition, slide out transition to put in my javascript code that matches my onClick="myFunction" argument: Set the webkit-keyframes from/to parameter with JavaScript . Here is my code:

HTML:

<div class="youtubebutton">
<a class="fab fa-youtube" id="youtube" onclick="ytbclick()"></a>
</div>
<div id="overlayytb">
  <div id="text">This link is coming soon.<div>
  <a class="fas fa-check-square" onclick="okbutton()"></a>
</div>

Javascript:

<script>

function ytbclick() {
document.getElementById("overlayytb").style.display = "block";
}

function okbutton() {

  // document.getElementById("text").style.animationDirection = "reverse";
  // document.getElementById("text").style.Display = "block";
  var cssAnimation = document.createElement('style');
  cssAnimation.type = 'text/css';
  var rules = document.createTextNode('#newtext > #text {'+'animation-name: slidedown2;'+
 ' animation-direction: reverse;'+
  'animation-fill-mode: forwards;'+
  'animation-duration: .5s;'+'}'+'-@webkit-keyframes slidedown2'+'{'+'from{transform: translate(-50%,-50%);}'+'to{transform: translate(-50%,-467%);}'+'}');
  cssAnimation.appendChild(rules);
  document.getElementsByTagName("head")[0].appendChild(cssAnimation);
}
</script>

CSS for the slide in animation:

#overlayytb {

  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);  /*Black background with opacity */
  z-index: 2; 
  cursor: pointer; 

}

#text{
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  top: 50%;
  left: 50%;
  font-size: 50px;
  letter-spacing: 0px;
  color: white;
  transform: translate(-50%,-50%);
  /*-ms-transform: translate(-50%,-50%);*/
  animation-name: slidedown;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-duration: .5s;
  animation-direction: normal;
}

@-webkit-keyframes slidedown
{
    0%
    {
        transform: translate(-50%,-467%);
    }
    100%
    {
        top:50%;
        transform: translate(-50%,-50%);
    }
}