steps
Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value ‘start’ or ‘end’, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value ‘end’.
The rough translation is as follows: The steps function specifies a step function, and the first parameter specifies the number of intervals in the time function (must be a positive integer); the second parameter is optional and accepts two values, start and end, which are specified in each The start or end point of the interval has a step change, the default is end.
This may be a bit abstract to understand, let's take an example:
#demo {
animation-iteration-count: 2; animation-duration: 3s; }This is a 3s * 2 animation, we apply steps(3, start) and respectively to it steps(3, end) , and make a step function curve as follows:
1. steps(3, start)
The first parameter of steps() splits the animation into three segments. When the specified hop is start, the animation takes a step at the beginning of each timing cycle (ie, open circle → filled circle in the figure). Since the first step occurs at the beginning of the first timing cycle (0s), the first animation (initial state) we see is 1/3 of the state, so the visual animation process is 1 /3 → 2/3 → 1 . If translated into JavaScript, it is roughly as follows:
var animateAtStart = function (steps, duration) {
var current = 0; var interval = duration / steps; var timer = function () { current++; applyStylesAtStep(current); if (current < steps) { setTimeout(timer, interval); } }; timer(); };
2. steps(3， end)
When the specified jump point is end, the animation will jump at the end of each timing cycle (ie, the hollow circle → solid circle in the figure). Since the first step occurs at the end of the first timing cycle (1s), the initial state we see is 0%; and at the end of the entire animation cycle (3s), although the step jumps to 100 % state, but at the same time the animation ends, so the 100% state is not visible. Therefore, the visual animation process is 0 → 1/3 → 2/3 (recall the asynchronous clearing in the digital power, when all the outputs are high, the reset is triggered, so all high levels are transient). Also translated into JavaScript as follows:
var animateAtEnd = function (steps, duration) {
var current = 0; var interval = duration / steps; var timer = function () { applyStylesAtStep(current); current++; if (current < steps) { setTimeout(timer, interval); } }; timer(); };