Get your own website Result Size: 625 x 565
x
 
<!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>