steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二是表示分成几段后，他是start还是end去执行动画。参数二有两个可选值start和end，默认是end。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes typing {
from { width: 100% }
to { width:0 }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@-moz-keyframes typing {
from { width: 100% }
to { width:0 }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: monospace; }
h1 {
position: relative;
float: left;
font-size:150%;
}
h1 span {
position:absolute;
top:0;
right:0;
width:0;
background: white; /* same as background */
border-left: .1em solid black;
box-sizing: border-box;
-webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
-moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
}
</style>
</head>
<body>
<h1>HELLO WORLD. Typing animation By Yaiel_lvya.<span> </span></h1>
</body>
</html>效果图：
steps介绍
steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数——第一个参数是一个正值，指定我们希望动画分割的段数。
Steps(<number_of_steps>，<direction>)
第二个参数定义了这个要点 在我们的@keyframes中申明的动作将会发生的关键。这个值是可选的，在没有传递参数时，默认为”end”。
方向为”start”表示一个左--持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。
方向为”end”表示一个右--持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束。
执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。每个选择本质上从一个不同的面移动这个元素并且将产生一个不同的位置在这个相同的动画里。
以上就是steps是什么意思？的详细内容，更多请关注0133技术站其它相关文章！
