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.


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;
| improve this answer | |
  • Hello Jacob, Thanks for your reply. I have added the left property previously and it was not working. I have added that now too. Can you please check that? – Jitendra Mishra Feb 20 '19 at 3:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.