title: Custom animation start on button click? HTML, CSS, JS
body: <p>Right now I'm trying to add an animation to a div when I press a button.
  However, I'm not sure on how to trigger a custom animation on button click with JavaScript or jQuery. As of now I do not have any JavaScript written for this. </p>
  
  <p>Im very new to this, hence me asking the pro's! </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container" id="frontPage"&gt;
          &lt;div "container"&gt;
              &lt;h1 class="header center green-text"&gt;ABOUT&lt;/h1&gt;
              &lt;div class="row center"&gt;
  
                  &lt;p class="header col s12 light"&gt;Something here&lt;/p&gt;
  
              &lt;/div&gt;        
          &lt;/div&gt;
          &lt;div class="row center padding-bottom-1"&gt;
              &lt;a a href="{{ url('/loginpage') }}" class="btn-small green" id="loginButton"&gt;login&lt;/a&gt;
              &lt;a class="btn-small green"&gt;apply&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#frontPage {
    text-align: center;
    margin-top: 80px;
    position: relative;
    animation-name: slideOutLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    width: 500px;
  }
  
  @keyframes slideOutLeft {
    0% {left: 0;}
    100% {left: -1500px;}
  
  }
  </code></pre>