<!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>