background color of side menu becomes transparent on adding transform

Question

i have addded a menu icon and side menu for mobile devices.

when menu icon is clicked side menu will be visible.

iam trying to add a ease in animation on opening side menu. but when iam adding transform property the background of sidemenu becomes transparent,when i commented out those lines it works fine without animation.

why the background become transparent on adding transform property?

how to acheive this animation on opening side menu.

    .menu {
       transform: translateX(70%);// commenting this line and 
       transition: all 0.5s ease-in;

       opacity: 0;

        pointer-events: none;

        visibility: hidden;
        display: none;
        width: 0;
        height: 0;
    }
   .menu-active {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);//commenting this line
        display: block;
        width: 100%;
        height: 100%;
        z-index: 9999999;
   }

i have created two pens to show the issue?

without transform ( works fine but no animation ) https://codepen.io/sinan-m/pen/QWxzveK
with transform arises issue https://codepen.io/sinan-m/pen/bGKORgw

I'm confused, I don't see what you're describing about a side menu in the codepen snippet. — Robert Bradley, Dec 05 '22 at 16:43
@RobertBradley side menu on mobile screen,let me edit my question side menu and menu icon is visible on small screens — sinan, Dec 05 '22 at 16:44
Try changing `translate` to `translateX` and let us know if that is what you need.. :) — ProblemChild, Dec 05 '22 at 16:51
@ProblemChild i want to open the side menu in a ease in fashion — sinan, Dec 05 '22 at 16:54
@sinan My bad, I thought the problem was the background color. Sorry. Let me try to solve the animation prob you have. :) — ProblemChild, Dec 05 '22 at 17:02
@TemaniAfif i tried to do it but it's not working for me, can you do it on this pen? when i read the linked answer ,it seems acheiving this animation with position:fixed is not possible?i couldnot grab that problem well. — sinan, Dec 06 '22 at 16:00

background color of side menu becomes transparent on adding transform

0 Answers0