title: Why does `animation-direction: reverse` not work for my CSS keyframe animation?
body: <p>I'm trying to use <code>animation-direction: reverse</code> to refactor my CSS keyframe animation. I have a container div when clicked will toggle an "active" class on it via jQuery which triggers the animation (forward or backward depending on the "active" state). The forward and backward animations are exactly the same thing except the keyframes are in the reverse order. I figured that <code>animation-direction: reverse</code> would enable me to refactor it by just using one animation and reversing it for the other, but it's not working the way I thought it would. </p>
  
  <p>Link to codepen (without using <code>animation-direction: reverse</code>):
  <a href="https://codepen.io/soultrust/pen/gogKjN" rel="nofollow noreferrer">https://codepen.io/soultrust/pen/gogKjN</a></p>
  
  <p>The following markup and CSS (Sass) code snippet is the way it works now without reverse. </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>&nbsp;</p>
  
  <pre><code>$width-height: 100px;
  $duration: 1s;
  $line-width: 10%;
  $animation-distance: $width-height * .45;
  
  @keyframes line-in {
    0% { transform: translateY(-$animation-distance); }
    50% { transform: translateY(0); }
    100% { transform: rotate(-135deg); }
  }
  
  @keyframes line-out {
    0% { transform: rotate(-135deg); }
    50% { transform: translateY(0); }
    100% { transform: translateY(-$animation-distance); }
  }
  
  .container {
    margin: 10rem auto 0;
    width: $width-height;
    height: $width-height;
    position: relative;
    border: 1px solid black;
  
    &amp;.active {
      .line {
        animation-name: line-in;
        animation-direction: normal;
      }
    }
  }
  
  .line {
    width: 100%;
    height: $line-width;
    position: absolute;
    top: 45%;
    background-color: orange;
    animation-direction: normal;
    animation-name: line-out;
    animation-duration: $duration;
    animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>When I change the "active" animation to following, animations in both directions stop working. </p>
  
  <pre><code>&amp;.active {
    .line {
      animation-name: line-out;
      animation-direction: reverse;
    }
  }
  </code></pre>
  
  <p>I believe it has something to do with using the same animation because if I just set the <code>animation-direction: reverse</code> and use <code>animation-name: line-in</code>, it correctly plays the line-in animation in reverse. </p>