jQuery pop up and transition of div element

Question

I have a form that I created below that I want to use in lieu of a prompt box. I want to make it pop up with a rubberband effect on load, then when the user clicks "confirm" it stores the input in a variable I have in my javascript file and 3d translates on the z axis to grow slightly (appear to move towards the screen) as it transitions off to left and shrinks back to slightly smaller than original size. I have no idea how to accomplish this. Can someone help me?

<form id="player-one" onsubmit="return false;">
    <input type="text" class="form-control" placeholder="Player : : 1">
    <button type="submit" class="btn btn-default">
        Confirm
    </button>
</form>

Answer 1

I have made ~80% of your needs, but I have no idea what's the last effect you're talking about.

As soon as you can show me something similar, or explain it better, I update the answer.

Take a look at the example below.

document.addEventListener('DOMContentLoaded', function() {
  var popup = document.getElementById('language-popup');

  popup.classList.add('animated', 'bounceIn');

  document.querySelector('a.close').addEventListener('click', function(e) {
    popup.classList.add('hidden');
  });

  document.getElementById('player-one').addEventListener('submit', function(e) {
    e.preventDefault();
    
    popup.classList.add('animated', 'zoomoutdown');
    
    var txt = document.getElementById('txtPlayerOne');    
    // use the txt.value to store it to the variable you want
  });
});

.hidden {
  display: none;
}

#language-popup {
  background-color: #AAAAFF;
  font-family: Verdana;
  padding: 12px;
  border-radius: 10px;
  width: 300px;
  height: 150px;
  position: absolute;
  top: 50px;
}

#language-popup h3 {
  text-align: center;
}

#language-popup ul {
  list-style-type: none;
}

#language-popup a {
  text-decoration: none;
  color: black;
}

#language-popup a:hover {
  text-decoration: underline;
}

#language-popup .close {
  float: right;
}

#language-popup .close:hover {
  text-decoration: none;
}

#language-popup .close:after {
  content: '✖';
  cursor: pointer;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}



@keyframes zoomoutdown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomoutdown {
  animation-name: zoomoutdown;
}

<div id="language-popup">
  <a class='close'></a>
  <h3>Player</h3>
  <form id="player-one">
    <input id="txtPlayerOne" type="text" class="form-control" placeholder="Player : : 1">
    <input type="submit" class="btn btn-default" value='Confirm' />
  </form>
</div>