CSS transition from 0px width to 100% width

I have a website where I have set the content to left 100% on normal screen and on click on the button it will show on the screen with left 0%.

I want the transition to be smooth, like the width will increase gradually, not immediately.

I have added transition: transform 1s; on the normal button and on the expand feature, I have used transform: translate(0px, 0px); but still that section is opening immediately.

Please check the page here on mobile only.

Here are the buttons on my question.

Upon clicking on that, a popup is showing. I want that to come from left slowly. I have used the above CSS but that are not working. You can see the CSS on the page:

#tab-description, #tab-additional_information, #tab-video, #tab-fragen, #tab-reviews {
   position: absolute;
   background: #fff;
   right: auto !important;
     left: 100% !important;
   width: 100%;
   overflow: hidden;
   top: 0;
     transition: transform 1s;
}
#tab-description.expand, #tab-additional_information.expand, #tab-video.expand, #tab-fragen.expand, #tab-reviews.expand {
    overflow-y: scroll;
    position: fixed;
      height: 100vh;
    z-index: 9;
      left: 0 !important;
    padding: 20px;
      width: 100%;
      transform: translate(0px, 0px);
}

Any help appreciated.

I have a website where I have set the content to left 100% on normal screen and on click on the button it will show on the screen with left 0%.

I want the transition to be smooth, like the width will increase gradually, not immediately.

I have added transition: transform 1s; on the normal button and on the expand feature, I have used transform: translate(0px, 0px); but still that section is opening immediately.

Please check the page here on mobile only.

Here are the buttons on my question.

Upon clicking on that, a popup is showing. I want that to come from left slowly. I have used the above CSS but that are not working. You can see the CSS on the page:

#tab-description, #tab-additional_information, #tab-video, #tab-fragen, #tab-reviews {
   position: absolute;
   background: #fff;
   right: auto !important;
     left: 100% !important;
   width: 100%;
   overflow: hidden;
   top: 0;
     transition: transform 1s;
}
#tab-description.expand, #tab-additional_information.expand, #tab-video.expand, #tab-fragen.expand, #tab-reviews.expand {
    overflow-y: scroll;
    position: fixed;
      height: 100vh;
    z-index: 9;
      left: 0 !important;
    padding: 20px;
      width: 100%;
      transform: translate(0px, 0px);
}

Any help appreciated.

• css

Share Improve this question edited Feb 20, 2019 at 2:22 Jacob Peattie 44k1010 gold badges4949 silver badges6262 bronze badges asked Feb 19, 2019 at 17:23 Jitendra MishraJitendra Mishra 5311 gold badge22 silver badges44 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

To animate a transition with CSS, you need to set transition to the property that is changing. You've set transition: transform 1s;, which will animate any change to the transform property, but the transform property isn't changing between the two states. The property that is changing is left, which changes from 100% to 0. So that's the property you need to transition:

transition: left 1s;

To achieve a smooth transition from 0% width to 100% width, you should use the transition property with the width property, not with transform.

With this CSS, when the .expand class is added to the element, it will transition from 0% width to 100% width over the duration specified in the transition property.

Make sure to remove !important from the left and width properties in both regular and expanded states to ensure that the transition works as expected

#tab-description, #tab-additional_information, #tab-video, #tab-fragen, #tab-reviews {
    position: absolute;
    background: #fff;
    left: 100%;
    width: 0;
    overflow: hidden;
    top: 0;
    transition: width 1s; /* Apply transition to width property */
}

#tab-description.expand, #tab-additional_information.expand, #tab-video.expand, #tab-fragen.expand, #tab-reviews.expand {
    overflow-y: scroll;
    position: fixed;
    height: 100vh;
    z-index: 9;
    left: 0;
    padding: 20px;
    width: 100%; /* Adjust width to 100% */
}