title: Trigger CSS Animations in JavaScript
body: <p>I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only. </p>
  
  <p>I need to call/trigger CSS Animation when the user scrolls the page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function start() {
    document.getElementById('logo').style.animation = "anim 2s 2s forward";
    document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0px;
  }
  
  #logo {
    position: fixed;
    top: 200px;
    height: 200px;
    width: 1000px;
    left: 5%;
    z-index: 4;
    opacity: 0.8;
  }
  
  #earthlogo {
    position: fixed;
    top: 200px;
    height: 120px;
    align-self: center;
    left: 5%;
    margin-left: 870px;
    margin-top: 60px;
    z-index: 4;
    opacity: 0.9;
  }
  
  @keyframes anim {
    50% {
      filter: blur(10px);
      transform: rotate(-15deg);
      box-shadow: 0px 0px 10px 3px;
    }
    100% {
      height: 100px;
      width: 500px;
      left: 10px;
      top: 10px;
      box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
      background-color: rgba(0, 0, 1, 0.3);
      opacity: 0.7;
    }
  }
  
  @keyframes anim2 {
    50% {
      filter: blur(40px);
      transform: rotate(-15deg);
    }
    100% {
      height: 60px;
      width: 60px;
      left: 10px;
      top: 10px;
      margin-left: 435px;
      margin-top: 30px;
      opacity: 0.8;
    }
  }
  
  #backstar {
    position: fixed;
    width: 100%;
    z-index: 1;
  }
  
  #earth {
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="logo.png" id="logo" onclick="start();"&gt;
  &lt;img src="earthlogo.gif" id="earthlogo" onscroll="start();"&gt;
  &lt;img src="earth.png" id="earth"&gt;
  &lt;img src="stars.jpg" id="backstar"&gt;</code></pre>
  </div>
  </div>
  </p>