以下で、100% も 0% も translateY(100px) となっているのに、
最後にメッセージが元の位置(右下に表示されている位置 positon: fixed; right: 32px; bottom: 32px; )に戻ってしまうのは何故ですか？

最後は 100% で終わるのではないのでしょうか？
また、何故、表示されない状態で終えるには
animation-fill-mode: forwards;としなければならないのでしょうか。

forwards は進めるという意味になりますが、0% からさらに進めると 20% なので、
「表示される tranform: none;」状態ではないのでしょうか？

@keyframes popup {
  0% {
    transform: translateY(100px);
  }
  20% {
    transform: none;
  }
  80% {
    transform: none;
  }
  100% {
    transform: translateY(100px); 
  }