我正在建立一个没有JS的小网站，我遇到了一个动画问题。我想在调整窗口大小时去掉移动菜单上的关闭动画。因为目前，如果我缩小窗口大小，菜单会在转到一侧（视口之外）之前出现一小会儿。
我的菜单在媒体查询中的一般样式如下：

.menu {
            position: fixed;
            z-index: 80;
            width: 19rem;
            transform: translateX(100%);
            height: 100%;
            top: 0;
            right: 0;
            padding-top: 4.4rem;
            justify-content: revert;
            
            text-align: right;
            box-shadow: var(--b-shadow-l);
            background-color: seagreen;
            /* todo */
            transition: 800ms;
        }

当菜单打开时：

#mobile:checked ~ .menu {
                transform: translateX(0%);
                transition-property: transform;
                transition-duration: 800ms;
            }

Codepen为了更好地看清形势：https://codepen.io/aayko/pen/OJEErBM
目前为止我唯一的解决办法就是删除闭幕动画...
我在寻找任何东西，即使这意味着改变我的移动菜单的风格。