<!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>steps() 函数</h1>
<p>将一个元素从 0px 移动到 400px 左侧。动画持续 5 秒。</p>
<p>此动画是线性的：</p>
<div class="linear">linear</div>
<p>此动画将有 4 个步骤，变化在每个间隔结束时发生：</p>
<div class="a">steps(4, jump-end)</div>
<p>此动画将有 6 个步骤，变化在每个间隔开始时发生：</p>
<div class="b">steps(6, jump-start)</div>
<p>此动画将有 4 个步骤，在开始或结束时没有跳跃。</p>
<div class="c">steps(4, jump-none)</div>
<p>此动画将有 4 个步骤，在开始和结束时都有跳跃。</p>
<div class="d">steps(4, jump-both)</div>
</body>
</html>