摆脱关闭移动菜单 animation on window resize

Question

I'm building a small website without JS for school and I'm stuck on an animation problem. I want to get rid of the closing animation on my mobile menu when resizing the window. Because currently, if I reduce the size of the window the menu will appear for a brief moment before going to the side (outside of the viewport).

My menu general style in the media query is the following:

        .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;
        }

When the menu is opened:

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

Codepen to better see the situation: https://codepen.io/aayko/pen/OJEErBM

My only solution so far is to remove the closing animation...

I'm looking for anything, even if it means changing the way I style my mobile menu.

Answer 1

Just remove the whole transform in your code above, instead give the right: -100% when normal and right: 0 when checked, the animation is the same without the flash disappear.

.menu {
    position: fixed;
    z-index: 80;
    width: 19rem;
    height: 100%;
    top: 0;
    right: -100%;
    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 {
    right: 0;
}