W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  height: 100px;
  position: relative;
  background-color: pink;
}

div.linear {
  animation: mymove 5s linear;
}

div.a {
  animation: mymove 5s steps(4, end);
}

div.b {
  animation: mymove 5s steps(6, jump-start);
}

div.c {
  animation: mymove 5s steps(4, jump-none);
}

div.d {
  animation: mymove 5s steps(6, jump-both);
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 400px;}
}
</style>
</head>
<body>

<h1>The steps() function</h1>

<p>Move an element from 0px to 400px left. The animation lasts for 5 seconds.</p>

<p>This animation is linear:</p>
<div class="linear">linear</div>

<p>This animation will have 4 steps, with changes occurring at the end of each interval:</p>
<div class="a">steps(4, jump-end)</div>

<p>This animation will have 6 steps, with changes occurring at the start of each interval:</p>
<div class="b">steps(6, jump-start)</div>

<p>This animation will have 4 steps, with no jumps at the start or end.</p>
<div class="c">steps(4, jump-none)</div>

<p>This animation will have 4 steps, with jumps both at the start and end.</p>
<div class="d">steps(4, jump-both)</div>

</body>
</html>