<div style="margin-bottom: 40px;">
  <button onclick="show()">テキストを表示</button>
  <button onclick="hide()">非表示</button>
</div>

<div class="box">
  <div class="text">サンプル文章です。サンプル文章です。</div>
</div>

body {
  font-size: 32px;
}

.box {
  width: 600px;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 3s;
  
  .text {
    transform: translateX(100%);
    transition: transform 3s;
  }
  
  &.visible {
    transform: translateX(0);
    .text {
      transform: translateX(0);
    }
  }
}

function show() {
  const elems = document.getElementsByClassName('box');
  elems[0].classList.add("visible");
}

function hide() {
  const elems = document.getElementsByClassName('box');
  elems[0].classList.remove("visible");
}