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. 

The effect is that although the button fades, it's still on top of underlying items and prevents clicks from hitting them.

```
.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;
  }
}

```