<!DOCTYPE html>
<html>
<head>
<style>
.track { width: 350px; border: 1px solid #ccc; margin: 20px; position: relative; height: 30px; }
.box {
width: 50px; height: 30px; background: red; position: absolute;
animation: move 3s infinite;
}
.jump-start { animation-timing-function: steps(3, jump-start); }
.jump-end { animation-timing-function: steps(3, jump-end); }
@keyframes move {
from { left: 0px; }
to { left: 300px; }
}
</style>
</head>
<body>
<div class="track">
<b>jump-start:</b>
<div class="box jump-start"></div>
</div>
<div class="track">
<b>jump-end (default):</b>
<div class="box jump-end"></div>
</div>
</body>
</html>
To Reproduce: