How long has it been since I updated my column? Half a year? The second half of the year to take off, or literally launch? In the first half of the year, I devoted my personal time to Python, and now I have almost forgotten all about “788” (a song titled “Cool and cool” for myself). In the second half of the year, I devoted myself to JavaScript, and finally I plucked up the courage to systematically learn JS (changing the channel, And Leong Jing Ru’s “Courage” started to walk). I was going to wait and wait until WebAPI came out with a bang, but SVG +CSS animations with JavaScript are just like a tiger. But, watching the discussion in the gold-digging writers’ group, I suddenly felt like a total stranger. , so, a more article brush a sense of existence.

This article was originally written “SVG+CSS animation” in a small volume of a small excerpt, because of a variety of inexplicable reasons, stranded, stranded… The launch time is far from certain, but the Keyframes, as an important element controlling the state of the animation at different times, determine the final form of the 72 changes, so this update column takes it up. As for the booklet, if you can send it, it will be good to change it into other cases, which will be discussed later.

The basic concept of keyframes can be omitted here.

Case study: a never-ending circle along the way

Because it is only used to interpret key frames, a simple horizontal displacement only dynamic effect is applied. As a result, this article can exist independently of SVG and only relate to CSS3 animation properties.

1. Let’s start with the basics

CSS section defines a most basic displacement animation, 4s complete, linear speed case- keyframe demo 1- basic.

@keyframes  move{
0%{transform:translateX100% (0)} {transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /* Both: stop at the finish */
Copy the code

This comes into play primarily when defining an infinite loop animation.

The basic setup naturally leads to a featureless, bland base effect.

2. Delayed start (discard animation-delay property)

Now, I want the circle to stay at the starting point for 2 seconds before it starts moving. The first response is to use the animation-delay in the animation property to set the time to 2 seconds. Ok? Okay, but I’m going to take a more advanced approach here. When defining the key frame, we use a lot of percentages. Here, the percentage value represents the time node, that is to say, the key frame defines the state attributes of different time nodes. Let’s look at another diagram, not to be confused with the path demo above, which is a timeline of the animation.

@keyframes  move{
0%{transform:translateX50% (0)} {transform:translateX(0px)}
100%{transform:translateX(800px)}
}
Copy the code

It’s a little easier to understand when you look at the split timeline above, so you get the motion effect of staying for 2s at the start and finishing the entire animation for 2s at the end. {transform:translateX(0)} {transform:translateX(0)} {transform:translateX(0)}} Case – Keyframe demo – Delayed start

3. End early

With the basis of delayed start, early end is not already analogously out. To differentiate, I ended the animation 3s ahead of time. As usual, let me draw the timeline first.

@keyframes  move{
0%{transform:translateX25%, 100% (0)} {transform:translateX(800px)}
}
Copy the code

The end result is that the circle must be 4 times as fast as possible to complete the journey (after all, it has to compress the original 4s time into 1s to complete the journey), and then wait happily at the end of the animation time. Case – Keyframe demo – End early

Stop over

Those stations that are already in place are now in play, and I want the circle to go like this: stay at the first station (after moving 200px) for only 1s during the journey to regroup. What does it look like to map to the timeline?

@keyframes  move{
0%{transform:translateX18 (0)}75.%, 4375.% {transform:translateX(200px)} /* corresponds to 1s*/100% {transform:translateX(800px)}
}
Copy the code

Case – Keyframe demo – first post stays for 1s

5. Jump like a wormhole

To make it more difficult, stopping at any point in the way is no longer a problem. Stopping at one point is the same idea as stopping at multiple points. Now, I make the circle skip forward, enter the first station, stay for 1s, cross the second station, enter the third station directly, stay for 1s, and complete the journey. According to the principle of space folding, there are transitions at 200 and 600. Analysis timeline:

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

What is the effect?

@keyframes  move{
0%{transform:translateX25% (0)} {transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /* Hold for 1s after a 600px shift */100% {transform:translateX(800px)}
}
Copy the code

That’s why it seems like you reach the first station, speed up to the third, then stay and finish the rest of the way. Now that the game is getting more interesting, maybe we can try to fool the browser. Since only one attribute value is allowed to be defined at the same time point, what happens if I add a time point next to it?

@keyframes  move{
0%{transform:translateX25%, 50% (0)} {transform:translateX(200px)}
500001.{%, 75%transform:translateX(600px)} 
100%{transform:translateX(800px)}
}
Copy the code

Looking at the point 50.0001% above, guess what happened? This is the way to “fool the browser.” In the interval from 50% to 50.0001%, a displacement change of 400px (200 to 600) occurred. So you get something like this: Case-keyframe-transition

In principle, this is a form of visual deception, in which two positions move in a negligible amount of time, giving the illusion of a jump.

conclusion

After watching the above several typical examples, the definition of key frames have a new understanding, you may feel for “delay start” and “end” ahead of the two kinds of demand, is completely can by defining the delay time and animation cycle time to achieve the same effect, however, for an infinite loop dynamic effect, Delayed start is only used once, and is no longer supported once the animation has started the cycle. Therefore, if possible, try to use the definition of keyframes.

Type on the blackboard and underline

For keyframes, the most important thing is the time node, and the best way to do this is to roughly map the events sequentially onto the time axis.