0% {
    /* transform: translateY(100px); */
    transform: translateY(10px);
    /* display: none; */
    opacity: 0;
  }
  20% {
    transform: none;
    opacity: 1;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    /* transform: translateY(100px); */
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
  }

20% と 80％ の中身が同じなので、80％ を書かないで省略できますか？