title: Trigger a CSS keyframe animation via scroll
body: <p>Say I have an element with an animation:</p>
  
  <pre><code>#element {
    animation: Fade 3s linear 1s forwards;
  }
  
  @keyframes Fade {
    /* do stuff */
  }
  </code></pre>
  
  <p>How can I trigger this animation only when the user scrolls down? Vanilla JS, jQuery, ScrollMagic, GSAP/TweenMax, however you want to do it.</p>
  
  <p>Would adding the animation property itself trigger the effect? So, a user scrolls to a certain point/element, and then I apply something like: <code>$('#element').css('animation', 'Fade 3s linear 1s forwards');</code>?</p>