title: CSS animation-fill-mode not working for display:none
body: <p>I have the following code to show/hide buttons on a carousel based on css classes. Everything works as intended, except on hideButton, the display is not set to "none" after the animation is done. </p>
  
  <p>The effect is that although the button fades, it's still on top of underlying items and prevents clicks from hitting them.</p>
  
  <pre><code>.pills-tab-carousel__button {
    position: absolute;
    top: 0;
    height: 100%;
    line-height: 100%;
    width: 64px;
    animation: showButton .5s forwards;
  }
  
  .pills-tab-carousel__button--hidden {
    animation: hideButton .5s forwards;
  }
  
  @keyframes hideButton {
    0% {
      opacity: 1;
      display: block;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }
  
  @keyframes showButton {
    0% {
      opacity: 0;
      display: none;
    }
    1% {
      opacity: 0.01;
      display: block;
    }
    100% {
      opacity: 1;
      display: block;
    }
  }
  </code></pre>