Detailed explanation of CSS animation attribute keyframes

How long has it been since I updated my column? Half a year? The second half of the year is so busy that it’s about to take off, or, quite literally, launch? The little personal time I had was spent on Python in the first half, and now I have almost forgotten most of it (I dedicate a song "Liangliang" to myself). The second half was spent on JavaScript, and I finally plucked up the courage to start learning JS systematically (change the channel, and start singing "Courage" by Fish Leong). I originally wanted to wait and wait until I finished learning webapi and then use my ultimate move. SVG+CSS animation combined with JavaScript is like a tiger with wings to advance rapidly. However, seeing the lively discussions in the Nuggets authors group, I suddenly felt like a complete stranger (should I put Tanya Chua here?), so I decided to write another article to make my presence felt.

This article was originally written as a small excerpt from the booklet "SVG+CSS Animation". Due to various inexplicable reasons, the booklet has been stranded, stranded... and the departure time is nowhere in sight. However, keyframes are important elements for controlling the state of animation at different times and determine the ultimate form of the 72 transformations, so this update column will start with it. As for the booklet, if it can be distributed, we can just replace it with other cases. But that’s a story for later.

The basic concepts of keyframes can be omitted here, and the following is full of dry goods.

Case: A circle that never stops moving forward

Since we are only explaining keyframes, we only made a simple horizontal displacement animation. Therefore, this article will exist independently of SVG and only be related to CSS3 animation properties.

This is a circle that is trying to roll from the starting point to the end point. The whole journey is 800px, but I set three stations at three places along its way. Now we need to define key frames to make the circle enter the station and pause for a while on its way.

1. Let’s start with the most basic

The CSS part defines a most basic displacement animation, which is completed in 4 seconds, linear speed case-keyframe demonstration 1-basics.

@keyframes move{
0%{transform:translateX(0)}
100%{transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /*both: stay at the end point after the movement*/

This comes into play mainly when an infinite looping animation is defined.

The basic settings naturally bring about basic animations that are featureless and bland.

2. Delayed start

Next, I want the circle to stay at the starting point for 2 seconds before starting to move. My first reaction is to use the delay animation- delay in the animation properties and define the time as 2 seconds. Is it okay? OK, but here's a more advanced approach. We use a lot of percentages when defining keyframes. The percentage value here represents the time node , which means that the keyframe defines the state attributes of different time nodes. Let's take a look at another picture. Don't confuse this picture with the path demonstration above. This is a picture of the animation timeline.

Letting the circle stay at the starting point for 2 seconds is just a representational statement. Translated into our animation definition language, it means that there is no animation effect in the first 2 seconds of the 4s animation cycle. So, let me define the animation rules like this:

@keyframes move{
0%{transform:translateX(0)}
50%{transform:translateX(0px)}
100%{transform:translateX(800px)}
}

It is easier to understand by comparing it with the division of the timeline above. In this way, we get the effect of staying at the starting point for 2 seconds and completing the entire animation in the next 2 seconds. Here we can also use a simpler way of writing it as 0%, 50%{transform:translateX(0)} . The same attributes can be combined together, separated by commas. case-keyframe demonstration-delayed start

3. End Early

With the basis of delayed start, early end can be deduced. To make a distinction, I let the animation end 3 seconds early. As usual, draw the analysis of the timeline first.

The corresponding keyframes are defined as follows:

@keyframes move{
0%{transform:translateX(0)}
25%, 100%{transform:translateX(800px)}
}

The final result circle must be to complete the journey at 4 times the speed (after all, the original 4s time must be compressed into 1s), and then wait leisurely at the end for the entire animation time to end. case-Key frame demonstration-end early

4. Stopover

Those stations that have been prepared can now play a role. I hope that the circle will move like this: in the entire journey, it will only stay for 1 second at the first station (after moving 200px) to make a slight adjustment. What does this look like when mapped onto a timeline?

Here, some strange-looking numbers appear that need some explanation. Let's make one thing clear first. When we analyze the timeline, what we ultimately want to obtain are time nodes. According to our design, if the movement lasts for 1s, the time required for staying is 3s. The 3s time is divided into two parts. The first part is the first 200px, and the second part is the last 600px. Because it is a linear uniform speed, when the timeline is divided into three parts, A+B+C, 200px is run in time period A, and 600px is run in time period C. The time corresponding to A is calculated to be 0.75s, the time corresponding to C is 2.25s, and the time of B is the stay time of 1s. Then it is converted into the corresponding percentage. This is the calculation method for the final two time nodes in the middle. After the timeline is parsed, the definition of the CSS part is easy to grasp:

@keyframes move{
0%{transform:translateX(0)}
18.75%, 43.75%{transform:translateX(200px)} /*corresponding to the 1s stay*/
100%{transform:translateX(800px)}
}

case-Key frame demonstration-stay at the first station for 1s

5. Leaping forward like a wormhole

To increase the difficulty, stopping at any point along the way is no longer a problem. The idea of ​​stopping at one point and at multiple points is the same. Now, I let the circle move forward in a jumping manner. After entering the first station, it stays for 1 second, crosses the second station, and directly enters the third station, stays for 1 second, and completes the journey. According to the principle of space folding, transitions occurred at 200 and 600. Analysis timeline:

Pay special attention to the red part, which is the time point of the transition, which shifts 200px without any time change. According to the timeline analysis, the CSS part is theoretically like this:

@keyframes move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}

What is the effect?

It’s completely different from what I imagined. What’s the problem? The browser doesn't know your real thoughts at the 50% time point. It will only think that you have defined it wrong. When there are two identical 50% keyframes with different property values, the browser will automatically ignore the first one and use the last valid value as the reference. So the above definition is equivalent to conveying the following message to the browser:

@keyframes move{
0%{transform:translateX(0)}
25%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /*Stay for 1s after moving 600px*/
100%{transform:translateX(800px)}
}

This is why it appears that after reaching the first station, it accelerates towards the third station, then stops and completes the rest of the journey. Now the game is getting more and more interesting, maybe we can try to trick the browser . Since only one attribute value is allowed to be defined at the same time point, what will happen if I add a time point to define it next to it?

@keyframes move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50.0001%,75%{transform:translateX(600px)} 
100%{transform:translateX(800px)}
}

Look at the time point **50.0001%** that appears above, guess what happened? This is the so-called "tricking the browser" method mentioned above. In the range of 50%→50.0001%, a displacement change of 400px (200→600) occurred. So we get the following effect: case-keyframe demonstration-transition

In principle, this is a visual deception, where displacement occurs between two positions in a very short period of time. Because the time is so short that it can be ignored, there is an illusion of jump.

Summarize

After reading the above representative examples, do you have a new understanding of the definition of keyframes? You may think that the two requirements of "delayed start" and "early end" can be achieved by defining the delay time and the animation cycle time to achieve the same effect. However, for an infinite loop animation, the delayed start will only work once. Once the animation starts to enter a repetitive cycle, this property setting is no longer supported. Therefore, if possible, try to do it with keyframe definitions.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.