I interviewed a lot of students this year, and whenever I saw “CSS3 proficiency” on the resume, I would ask about animation. However, I noticed that in 2019, there are still a lot of students who don’t know CSS animation.
One of the questions I like to ask is to achieve the following:
That is, a ball moves at a constant speed of 200px to the right, then back, then back, and finally stays at 200px.
The GIF effect is as follows:
It’s a simple animation, and most people don’t get it right.
No suspense, my answer is:
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #0ff;
animation: move 2s linear 3 alternate both;
}
@keyframes move{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(200px,0);
}
}
Copy the codeMost interviewees said that they had seen some tutorials on CSS animations, but didn’t use them much at work, so they forgot about them.
Here, I’m going to add some related knowledge for those who don’t have a deep grasp of CSS animation. The big boys are welcome.
Start the text.
As you can see from developer tools, the animation property is short for the eight properties.
The meanings of these 8 attributes are as follows:
| attribute | describe |
|---|---|
| animation-duration | Specifies how long it takes the animation to complete a cycle, in seconds (s) or milliseconds (ms). Default is 0. |
| animation-timing-function | Specifies the animation timing function, the animation speed curve, which defaults to “ease”. |
| animation-delay | Specifies the animation delay time, that is, when the animation starts. The default is 0. |
| animation-iteration-count | Specifies the number of times the animation is played. The default is 1. |
| animation-direction | Specifies the direction in which the animation will play. The default is Normal. |
| animation-fill-mode | Specifies the animation fill mode. The default is None. |
| animation-play-state | Specifies the animation playback state, running or paused. The default is RUNNING. |
| animation-name | Specify the name of the @KeyFrames animation. |
Let’s go over what each animation property does and what you need to pay attention to.
CSS animation, also known as keyframe animation. Keyframes are defined via @keyframes.
The concept of frames, I think, is very clear to you. For example, a movie is a picture playing, so the image stays in the brain for a short period of time to create a dynamic effect. CSS animation also uses this principle. However, developers do not need to define each frame. You just need to define a few key frames. Because for the rest of the frames, the browser interpolates from the timing function.
For example, if we rotate a div once, we only need to define the start and end frames:
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
Copy the codeRotate is my name for the animation, from means the beginning frame, to means the end frame.
Specifically, CSS animations use percentages to describe an animation cycle. From is actually a nickname for 0% and to is a nickname for 100%. So keyframe Rotate is equivalent to:
@keyframes rotate{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Copy the codeWith the keyframe defined, you can use it directly:
animation: rotate 2s;
Copy the codeOr:
animation-name: rotate;
animation-duration: 2s;
Copy the codeAnimation-name specifies the key frame used by the animation. This is required. In JS terms, it is equivalent to: only the variable declaration is not good, but also need to use.
In addition, the above code specifies the animation-duration for the animation to run at 2s. The final running effect is as follows:
The effect of the GIF is not very obvious, the block is not uniform when rotating. This is because the animation-timing-function property, which describes the animation speed, defaults to Ease, which means fast before slow.
The following GIF shows what happens to some values of the timing function property:
The common values of animation-timing function are linear, ease, ease-in, ease-out, and ease-in-out. These values are in fact special cases of Cubic – Bezier (n,n,n,n,n). They are called Bessel curves. In addition to developer tools, the AUTHOR of “CSS Tell-All” also wrote an online site called Cubic-bezier.com for debugging Bezier curves. The Bezier curve is a useful thing to know, and there’s an API for that in Canvas. There are actually more points to expand, but this is just an introduction.
It should be mentioned that another interesting value of the timing function property is the steps function, which can be used to animate frames:
The timing function property is introduced here, and the value linear is always used after that, which means uniform animation.
Going back to keyframes, in addition to specifying the beginning and end of the keyframe (if 0% and 100% are not specified, the browser will automatically infer), we can also specify any percentage of the keyframes, such as another implementation of the opening example:
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #0ff;
animation: move 6s linear both;
}
@keyframes move{
0% {
transform: translate(0, 0);
}
33% {
transform: translate(200px,0);
}
66% {
transform: translate(0, 0);
}
100% {
transform: translate(200px,0);
}
}
Copy the codeThe keyframe code is redundant and can be further abbreviated:
@keyframes move{
0%, 66%, {
transform: translate(0, 0);
}
33%, 100%, {
transform: translate(200px,0);
}
}
Copy the codeAt this point, the duration of the animation is changed to 6s. One-third of the way through the animation, set the div at 200px, two-thirds of the way back to the start position, and move it to 200px at the end.
This is an intuitive way to do it, and a lot of interviewees tend to think about it.
Animation: move 6s linear both; Both in the statement. This is a value of the animation-fill-mode property. This property is easily overlooked, but it is an important one for CSS animations. Animation fill mode (animation fill mode)
Keyframes just defines the value of each frame during the animation, but what is the state of the element before and after the animation? Animation-fill-mode is all about this. In addition to the default none, there are three other values:
- Forwards, indicating that when the animation is finished, the element status remains at the last frame.
- Backwards backwards means that when there is a delay, the element will remain in frame 1 until the animation starts.
- A. both B. both C. both D. both
For example, the key frame for div moving from 100px to 200px is defined as:
@keyframes move{
0% {
transform: translate(100px,0);
}
100% {
transform: translate(200px,0);
}
}
Copy the codeWhen the fill mode is set to forwards, the animation finally stays at 200px:
If you set the delay to 1s and fill mode to backwards, you can see that the animation will start at 100px and return to 0px when it’s over:
Finally set the fill mode to both cases:
After the animation is over, it is useful to keep the state of the last frame of the animation. For example, we can implement a progress bar:
div{
height: 10px;
border: 1px solid;
background: linear-gradient(#0ff,#0ff);
background-repeat: no-repeat;
background-size: 0;
animation: move 2s linear forwards;
}
@keyframes move{
100% {
background-size: 100%;
}
}
Copy the codeThe effect is as follows:
As mentioned above, you can use animation-delay to set the delay time. Lest you notice, the delay can be negative. Negative delay means that the animation seems to have been running for that long before it started.
Taking the above progress bar as an example, the original animation took 2s to load from 0% to 100%. If the delay is set to -1s. This animation will load from 50% to 100%. As if it had been running for 1s:
CSS animations can be paused. The animation-play-state property indicates the state of the animation being played, and the default value “RUNNING” means that the animation is being played, and “paused” means that the animation is being paused:
Animation-play-state is a nice property that can be used in conjunction with negative delay to achieve special effects, such as progress bar plugins:
So far, there are two properties that are not covered. One is animation-iteration count, which means the number of times an animation is played. It’s pretty easy to understand, except for the fact that infinite is infinite. The other is animation-direction, which specifies that the animation plays the keyframes defined by @keyFrames in the specified order. The values are as follows:
- Normal Default value.
- Reverse indicates that the animation is played backwards.
- Alternate means forward and reverse crossing.
- Alternate-reverse indicates reverse and forward crossover.
The schematic is as follows:
Finished animation attributes and 8 is the introduction, in addition to note is that they like background and each attribute, is to support multiple values, the application on the same element and the multiple animations, gave everyone a great:
<style>
div{
margin: 200px;
height: 20px;
border: 1px solid;
animation: rotate 2.5 s infinite, color 2s infinite, width 3s infinite;
animation-direction: normal, normal, alternate;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes color {
20% {
background-color: #f91;
}
80% {
background-color: #0ff
}
}
@keyframes width {
0% {
width: 40%;
}
100% {
width: 70%;
}
}
Copy the codeThe effect is as follows:
In this paper, to the end.