CSS3 animation – steps function explained

When I was looking at some CSS3 animation source code implementations these days, I found a relatively unfamiliar word "steps" in the CSS code animation. It is written like this in the source code:

animation: thunder 2s steps(1, end) infinite;

After consulting relevant information, I found that the steps function is a value of animation-timing-function attribute. So what is the difference between this function and other values ​​such as ease and linear?

Steps

After looking up relevant information, I found that I didn’t know enough about animation-timing-function . In fact, the function of animation-timing-function refers to steps() and cubic-bezier(), which is the Bezier curve function. Values ​​like linear and ease are actually special values ​​of the cubic-bezier() function. The steps() function also has two special values: step-start and step-end . After understanding these premises, let's analyze the role of the steps function in detail.

In fact, the steps function and cubic-bezier function correspond to two forms of animation: jumping and continuous. Let's review how we usually use the cubic-bezier function:

div {
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  30% {
    margin-left: 50px;
  }
  100% {
    margin-left: 100px;
  }
}

We only need to define the keyframes in @keyframes. The cubic-bezier function will help us fill in the frames between the keyframes to make it a smooth animation. But sometimes we don't want the animation to play continuously, but in a jumpy way. Then we need to use the steps function.

The steps function receives two parameters: number and position. number is a positive integer and position has two values: start and end. Earlier we mentioned two special values ​​of steps: step-start and step-end, which actually represent steps(1, start) and steps(1, end) respectively. What do these two parameters mean?

number: number indicates how many segments the animation is divided into. For example, the above example indicates that the entire process of the div moving from 0px to 100px is divided into 4 segments.

position: The position parameter is optional and defaults to end. What do start and end mean? My understanding is that number divides the entire animation process into multiple segments or cycles. start means that the state of the animation will change instantly at the starting point of each cycle, while end means that the state of the animation will change instantly at the end point of each cycle. Here is a picture from the W3C official document:

In the coordinate system of the above picture, the x-axis represents time and the y-axis represents the progress of the animation. What we need to pay attention to in this picture are the solid dots, which represent the state of the animation. Let's look at the first picture, which represents steps(1, start). According to the previous explanation, the entire animation will be a single cycle, and the start parameter is specified so that the animation will change state at the starting point of the cycle, so we can see that the coordinates of the first solid circle are (0,1). For the second picture, since end is specified, the state of the animation will change suddenly at the end point of the cycle, so the coordinates of the two corresponding solid circles are (0,0) and (1,1). The same is true for the following steps(3, start) and steps(3, end), which will not be analyzed in detail here.

Next, in order to more intuitively feel the role of the steps function, we will give a few examples to deepen our understanding:

Here is a coherent animation for reference. Some of the code is as follows:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}

The effect is as follows:

It can be seen that the red square moves at a constant speed to the end point after 2s, and then returns to the starting position

Here is an example of steps(1, start):

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-start;
}

The effect is as follows:

You can see that the block reaches the end point the moment I click refresh, and then returns to the starting position after 2 seconds.

Let’s look at the steps(1, end) example:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-end;
}

The effect is as follows:

You can see that the block does not move when you click refresh. This is because the block will instantly move to the 200px position after 2 seconds, then the animation ends and returns to the starting position. Since this process is so fast that it is invisible to the naked eye, it looks like the block is not moving. If you want it to stay at the end point, just add animation-fill-mode: forwards to the div.

Let's look at the situation of dividing into multiple segments. First, start is divided into multiple segments:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, start);
}

The effect is as follows:

In the above example, we divide the 4s animation into 4 cycles. The block will move at the starting point of each cycle, that is, 0s, 1s, 2s, and 3s. From the above effect diagram, we can also see that the state change is completed the moment I click refresh, and then it reaches the end point 3s later. It stays at the end point for 1s until the animation ends and returns to the starting position.

Let's look at the situation where end is divided into multiple segments:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, end);
}

The effect is as follows:

Specifying end will cause the animation state to change at the end of each cycle, in this case at 1s, 2s, 3s, and 4s. From the above effect diagram, we can also see that the block starts to move 1 second after I click refresh, and at the moment the block moves to the end point 4 seconds later, it moves back to the starting position due to the end of the animation, so it creates the illusion that the block does not move to the end point.

Summarize

The above is a detailed explanation of the CSS3 animation-steps function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!