Trigger a CSS keyframe animation via scroll
<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>