I want to make my menu bar play an animation that slides into the menu, but I don't know how. I'm using Javascript to create the element, CSS to animate and style it. I want to make a javascript code that plays the CSS animation and make it appear when the user clicks the login button/logs in. CSS:

#join_button{

  width: 60%;
  height: 40px;
  border-radius: 8px;

  font-family: Varela Round;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  cursor: no-drop;
  /* animation: blablalbla (play animation when clicked.) */
}

Javascript:

  var join_button = document.createElement('button')
  join_button.setAttribute('id', 'join_button')
  join_button.innerHTML = 'Join <i class="fas fa-sign-in-alt"></i>'

So, to actually clarify what I'm looking for, is a Javascript code that references #join_button, and play an animation.