title: How do I trigger a CSS @keyframe animation on scroll using Jquery?
body: <ol>
  <li>Firstly, I'm having a little trouble animating these <code>box</code> elements on scroll using <code>jquery</code>. I want my <code>animation</code> to start when I scroll past 1/4 of a <code>section</code>.
  
  <ol start="2">
  <li>Secondly, my <code>box</code> divs used to be vertically centered, but after adding the <code>@keyframes</code> during the transition they are not centered anymore. If you remove the <code>animation-fill-mode: forwards</code> you can see how they go back up at the end of the transition.</li>
  <li>And a last question.. Can <code>jquery</code> be used to animate these two boxes when I start scrolling without having to write different code for each <code>sections</code>? I'm thinking that If I add some common classes to my <code>box</code> divs that should work, right?</li>
  </ol></li>
  </ol>
  
  <p>Originally, in my <code>jquery</code> file I tried setting a <code>hidden</code> class with an <code>opacity:0</code> on the <code>box</code> divs and when I started scrolling that would change into a <code>showing</code> class with an <code>opacity:1</code>.. but that didn't go so well.</p>
  
  <p>Other solutions found on YouTube weren't helpful either.. blending other people code with mine doesn't seem to work very well.</p>
  
  <p>As you can see, there is no <code>jquery</code> code because It was a mess after my brain started messing with it and at one point I figured I should start fresh.</p>
  
  <p><a href="https://codepen.io/make96/pen/xjdbeR" rel="nofollow noreferrer">Here</a> is a link to my Codepen .</p>
  
  <p>Jade</p>
  
  <pre><code>.landing-page
  .section-one
    .box-one
  .section-two
    .box-two
  </code></pre>
  
  <p>SASS</p>
  
  <pre><code>@mixin box()
    position: absolute
    width: 200px
    height: 200px
    background: black
  .landing-page
    height: 100vh
    width: 100vw
    background: gray
  .section-one
    position: relative
    height: 100vh
    width: 100vw
    background: lightblue
    .box-one
      @include box()
      top: 50%
      right: 10%
      transform: translate(-50%,-50%)
      animation-name: box-one-animation
      animation-duration: 2s
      animation-fill-mode: forwards
  .section-two
    position: relative
    height: 100vh
    width: 100vw
    background: lightgreen
    .box-two
      @include box()
      top: 50%
      left: 10%
      transform: translate(-50%,-50%)
      animation-name: box-two-animation
      animation-duration: 2s
      animation-fill-mode: forwards
  
  @keyframes box-one-animation
    0%
      transform: translateX(0)  
    100%
      transform: translateX(-50%)
  @keyframes box-two-animation
    0%
      transform: translateX(0)  
    100%
      transform: translateX(50%)  
  </code></pre>