W3School でそれぞれの用法を調べて見たら、translate だけでも今回のように動いていました。

#modal.hidden{ translate: 0 -500px;}

これでもできたのですが、transform も組み合わせなければいけない理由が知りたいです。
よろしくお願いします。