.show-menu{
    display: block;
    animation: show-menu 0.2s ease-in-out forwards;
}

.show-bg-menu{
    display: block;
    animation: show-bg-menu 0.2s ease-in-out forwards;
}

.hidde-menu{
    animation: hide-menu 0.2s ease-in-out forwards;
}

.hide-bg-menu{
    animation: hide-bg-menu 0.2s ease-in-out forwards;
}

@keyframes show-menu {
    from {
        opacity: 0;
        transform: translateX(1000px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }    
}

@keyframes show-bg-menu {
    from {
        opacity: 0;
        transform: translateX(0);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }    
}

@keyframes hide-menu {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(1000px);
    }    
}

@keyframes hide-bg-menu {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(0);
    }    
}