<div class="animatebox"><div class="box woah wowzors"></div>

<form>
<center>
<select class="picker" name="animate" form="animate">
<optgroup label="Woah">
<option value="wowzors">wowzors</option>
<option value="comeInStyle">comeInStyle</option>
<option value="leaveInStyle">leaveInStyle</option>
<option value="dealWithIt">dealWithIt</option>
<option value="rotateComplex">rotateComplex</option>
<option value="rotateComplexOut">rotateComplexOut</option>
<option value="flyOut">flyOut</option>
<option value="flyIn">flyIn</option>
<option value="fedoraTip">fedoraTip</option>
<option value="blackMirror">blackMirror</option>
<option value="blackMirrorTextVersion">blackMirrorTextVersion</option>
<option value="spin3D">spin3D</option>
<option value="simpleEntrance">simpleEntrance</option>
<option value="scaleOut">scaleOut</option>
</optgroup>
<optgroup label="Wow">
<option value="starWars">starWars</option>
<option value="blazingStar">blazingStar</option>
<option value="blazingStarText">blazingStarText</option>
</optgroup>
<optgroup label="Normie">
<option value="fadeIn">fadeIn</option>
<option value="pulse">pulse</option>
<option value="shaker">shaker</option>
</optgroup>
</select>
<button type="button" class="subButton">Animate It</button>
</form></div>
body {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
  height: 100vh;
  overflow: hidden;
}

.box {
  height: 150px;
  width: 150px;
  background: linear-gradient(30deg, #2c3e50, #34495e);
  border-radius: 12px;
  box-shadow: 0px 10px 40px rgba(255, 255, 200, 0.3);
  text-align: center;
  vertical-align: middle;
  line-height: 150px;
  font-size: 24px;
}

.animatebox {
  height: 100vh;
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.picker {
  background-color: white;
  height: 32.5px;
  border: solid 1px black;
  color: black;
}

.subButton {
  background-color: white;
  border: solid 1px black;
  border-radius: 4px;
  margin: 5px;
  padding: 5px;
  color: black;
}

h1 {
  font-size: 450%;
  color: white;
}

a .btn {
  position: absolute;
  bottom: 10%;
  left: 50%;
  right: 50%;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 10px;
  color: white;
  text-align: center;
  width: 100%;
}
function testAnim(x) {
  $(".box")
    .html("")
    .removeClass()
    .addClass("box" + " woah " + x, function() {
      if (x.indexOf("Text") !== -1) {
        $(this).html("Woah");
      }
    });
}

$(document).ready(function() {
  $(".subButton").click(function(e) {
    e.preventDefault();
    var anim = $(".picker").val();
    testAnim(anim);
  });

  $(".picker").change(function() {
    var anim = $(this).val();
    testAnim(anim);
  });
});

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/woah.css
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  3. https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js