お世話になります。
0% のときの transform: translateY(20px); を設定せず、
message の元々の位置を 20px下（ bottom: 12px; ）にしておいて、
アニメーションの 20％ と 80% の時の位置を translateY(-20px); の位置に設定して、transform: none;も取って記述したところ、同じ動きをしているように見えたのですが、
そのように単純化しても問題ないでしょうか？