Как правильно сделать такой эффект в пагинации?

var btn = document.getElementById("toggle"); 
var px = document.getElementsByClassName("px"); 
btn.onclick = function() { 
  Array.from(px).forEach(function(el) { 
    el.classList.add("offset"); 
  }); 
}

* { 
  margin: 0; 
  padding: 0; 
} 
 
#toggle { 
  background: crimson; 
  border: none; 
  outline: none; 
  border-radius: 0.2rem; 
  color: white; 
  padding: 0.70rem 0.75rem; 
  margin: 0.5rem 1rem; 
  cursor: pointer; 
  box-shadow: 2px 2px 2px gray; 
  transition: 0.2s; 
  text-transform: uppercase; 
} 
 
#toggle:active { 
  box-shadow: none; 
} 
 
.line { 
  margin: 1rem; 
} 
 
.offset { 
  transform: translateX(50px); 
} 
 
.px { 
  width: 1px; 
  height: 1px; 
  background-color: #000; 
} 
 
.px:nth-child(1) { 
  transition: ease-in-out 0.4s; 
} 
 
.px:nth-child(2) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(3) { 
  transition: ease-in-out 0.5s; 
} 
 
.px:nth-child(4) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(5) { 
  transition: ease-in-out 0.58s; 
} 
 
.px:nth-child(6) { 
  transition: ease-in-out 0.56s; 
} 
 
.px:nth-child(7) { 
  transition: ease-in-out 0.58s; 
} 
 
.px:nth-child(8) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(9) { 
  transition: ease-in-out 0.5s; 
} 
 
.px:nth-child(10) { 
  transition: ease-in-out 0.45s; 
} 
 
.px:nth-child(11) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(12) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(13) { 
  transition: ease-in-out 0.43s; 
} 
 
.px:nth-child(14) { 
  transition: ease-in-out 0.44s; 
} 
 
.px:nth-child(15) { 
  transition: ease-in-out 0.59s; 
} 
 
.px:nth-child(16) { 
  transition: ease-in-out 0.54s; 
} 
 
.px:nth-child(17) { 
  transition: ease-in-out 0.56s; 
} 
 
.px:nth-child(18) { 
  transition: ease-in-out 0.52s; 
} 
 
.px:nth-child(19) { 
  transition: ease-in-out 0.5s; 
} 
 
.px:nth-child(20) { 
  transition: ease-in-out 0.56s; 
} 
 
.px:nth-child(21) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(22) { 
  transition: ease-in-out 0.4s; 
} 
 
.px:nth-child(23) { 
  transition: ease-in-out 0.52s; 
} 
 
.px:nth-child(24) { 
  transition: ease-in-out 0.48s; 
} 
 
.px:nth-child(25) { 
  transition: ease-in-out 0.46s; 
} 
 
.px:nth-child(26) { 
  transition: ease-in-out 0.45s; 
} 
 
.px:nth-child(27) { 
  transition: ease-in-out 0.52s; 
} 
 
.px:nth-child(28) { 
  transition: ease-in-out 0.54s; 
} 
 
.px:nth-child(29) { 
  transition: ease-in-out 0.55s; 
} 
 
.px:nth-child(30) { 
  transition: ease-in-out 0.55s; 
} 
 
.px:nth-child(31) { 
  transition: ease-in-out 0.5s; 
} 
 
.px:nth-child(32) { 
  transition: ease-in-out 0.51s; 
} 
 
.px:nth-child(33) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(34) { 
  transition: ease-in-out 0.5s; 
} 
 
.px:nth-child(35) { 
  transition: ease-in-out 0.6s; 
} 
 
.px:nth-child(36) { 
  transition: ease-in-out 0.51s; 
} 
 
.px:nth-child(37) { 
  transition: ease-in-out 0.52s; 
} 
 
.px:nth-child(38) { 
  transition: ease-in-out 0.46s; 
} 
 
.px:nth-child(39) { 
  transition: ease-in-out 0.45s; 
} 
 
.px:nth-child(40) { 
  transition: ease-in-out 0.6s; 
}

<button id="toggle">Click!</button> 
<div class="line"> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
  <div class="px"></div> 
</div>