@keyframes 中の 100% の記述が以下のように opacity: 0; となっているのに最終的に画像が消えてしまうのはなぜでしょうか？

.message の bottom が 32px あるので、0% 時に下に 10px 分動き、100% 時には更に 10px 動くので最終的には bottom は 32px - 10px - 10px = 12px の位置に表示されるのでは？と思いました。

  100% {
    transform: translateY(10px);
    opacity: 0;
  }