我有一个网站，我已将内容设置为正常屏幕上100%左侧，点击按钮，它将显示在屏幕上，左侧为0%。

我希望过渡平滑，比如宽度将逐渐增加，而不是立即增加。

我已添加transition: transform 1s; 在普通按钮和展开功能上，我使用了transform: translate(0px, 0px); 但该部分仍将立即开放。

请检查page here 仅在移动设备上。

这是按钮on my question.

单击该按钮后，将显示一个弹出窗口。我想让它从左边慢慢来。我已经使用了上面的CSS，但不起作用。您可以在页面上看到CSS：

#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);
}