W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!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>