JSFiddle - React, Tailwind, and code Playground

HTML

<div class="linear">
  Linear effect. Hover the mouse...
</div>
<div class="steps">
  Steps framed effect. Hover the mouse...
</div>

CSS

div {
  background: gray;
  width: 100px;
  height: 100px;
  text-align: center;
  position: relative;
  left: 0;
  margin-bottom: 15px;
}

div:hover {
  left: 500px;
}

.linear {
  transition: left linear .5s;
}

.steps {
  background: #BF55EC;
  transition: left steps(28) 1s;
}