CSS3 timing-function: steps()_html/css_WEB-ITnose

I found the steps() function. I didn’t know what it was. I searched on Baidu and got the following results:

1. The unbearable past

Applying CSS3 During gradient/animation, there is an attribute that controls time. In addition to the commonly used cubic Bezier curve, its value also has a confusing steps() function. In many related articles, the explanation of this function is relatively vague, such as:

steps() The first parameter number is the specified number of intervals, that is, the animation is divided into n steps for staged display. The second parameter defaults to end, which sets the status of the last step. start is the status at the end, and end is the status at the beginning.

Another example:

steps has two parameters

1. The first one must be executed in several steps
2. The second one has two parameters values ​​
   1. start The first frame is the end of the first step animation
   2. end The first frame is the start of the first step animation

young Being ignorant, I easily believed what everyone said. Every time I use the steps() function, I have to think about it first: Well, start corresponds to the final state, end corresponds to the initial state, the final state is OOOO, and the initial state is XXXX... WTF. groove! It’s not right to run!

2. Find out the truth

After being tricked, I had no choice but to ask the organization for help. So I found this provision:

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 '.

A rough translation is as follows: The steps function specifies a step function. The first parameter specifies the number of intervals in the time function (must be a positive integer); the second parameter is optional and accepts start and end. Two values ​​specifying whether a step change occurs at the beginning or end of each interval. The default is end.

This understanding may still be a bit abstract. Let’s give an example:

#demo { animation-iteration-count: 2; animation-duration: 3s; } 

This is a 3s * 2 animation. We apply steps(3, start) and steps to it respectively. (3, end), make the step function curve as follows:

1. steps(3, start)

steps() The first parameter divides the animation into three sections. When the specified jump point is start, the animation will jump at the starting point of each timing cycle (i.e., hollow circle → solid circle in the figure). Since the first step occurs at the starting point of the first timing cycle (0s), the first step of 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 hop is end, The animation will make a step at the end of each timing cycle (ie, open circle → solid circle in the figure). Since the first step occurs at the end of the first timing period (1s), the initial state we see is 0%; and at the completion of the entire animation period (3s), although the step jumps to 100 % state, but the animation ends at the same time, so the 100% state is not visible. Therefore, the visual animation process is 0 → 1/3 → 2/3 (recall the asynchronous clearing in digital electronics, when all output terminals are high level, the clearing is triggered, so all are high level) transient).

is 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(); }; 

If this explanation still makes you feel confused, you can refer to the interactive DEMO

3. Practical application

Although I have written so much, I still have to say that timing-function: steps() has very few applications in actual design, but with some weird techniques, it can still produce some good effects:

1. Timing mask

In this article on CSS3 circular progress bar, we have used timing-function to make the semi-circle show/hide regularly:

$precent: 5; // 进度百分比 $duration: 2s; // 动画时长 @keyframes toggle { 0% { opacity: 0; } 100% { opacity: 1; } } .progress-right { // 初态为 opacity: 0; 动画周期结束后为 opacity: 1; opacity: 1; animation: toggle ($duration * 50 / $precent) step-end; // step-end = steps(1, end) } .progress-cover { // 初态为 opacity: 1; 动画周期结束后为 opacity: 0; opacity: 0; animation: toggle ($duration * 50 / $precent) step-start; // step-start = steps(1, start) } 

The key here is to use step-start and step-end to control the animation, because the animation only has two key frames. Referring to the above, we can get:

step-start: jump to 100 at the beginning of the animation % until the end of the cycle

step-end: maintain the 0% style until the end of the cycle

It should be noted that the timing-function acts between each two keyframes, not the entire animation (the 'animation-timing-function' applies between keyframes, not over the entire animation), so there is the conclusion drawn by teacher Zhang Xinxu in the article Tip: CSS3 animation gradually realizes the little-by-little waiting prompt effect:

step-start, as the name implies, "start step by step", which is reflected in the animation by playing frame by frame and meal by frame

2. Sprite animation

in In this article on CSS3 to implement running animation, we use CSS3 Animation to implement sprite animation in game development:

$spriteWidth: 140px; // 精灵宽度 @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -($spriteWidth * 12) 0; // 12帧 } } #sprite { width: $spriteWidth; height: 144px; background: url("../images/sprite.png") 0 0 no-repeat; animation: run 0.6s steps(12) infinite; } 

其原理是：使用一张含有多帧静态画面的图片，通过切换 background-position 使其变为连续的动画。

四、结语

最近开始注意平常很少注意到的一些属性，虽说是不常用但一翻开也是别有一番洞天的感觉。马上就是新的一年了，这篇文章也算是对这一整年学习的一个交代吧~

诸君，新年快乐，武运昌盛！

（全文完）

原文地址https://idiotwu.me/understanding-css3-timing-function-steps/