Css3 animation implements frame-by-frame animation and css3animation animation

Css3 animation implements frame-by-frame animation and css3animation animation

The animation attribute in css3 is very powerful, but it is rarely used by myself. I was asked about it in a recent interview. Now I have time to make a small Summary of animation. At the same time, a demo of frame-by-frame animation is implemented as an exercise.

List of animation attributes

Because there are a lot of animation attributes, and it seems a little painful on w3c, I just made a map and want to see it later, it will be clear at a glance.

 

Use animation for frame-by-frame animation

After you are familiar with the attributes of animation, you have to find a simple small project implementation. frame-by-frame animation is very interesting. First, run one to satisfy your needs.
The idea is simple. It is to give the element a Sprite background, and then add the frame animation to change the background-position. The key code is as follows:

@keyframes run{    from{        background-position: 0 0;    }    to{        background-position: -1540px 0 ;    }}div{    width:140px;    height:140px;    background: url(run.png) ;    animation-name：run;    animation-duration:1s;    animation-iteration-count:infinite;}

However, after running, we found that the frames of each animation are slide, which is not our effect. Why?
It turns out that the animation is transitioned in the animation mode by default. It inserts a complementary animation between each key frame, so the animation effect is consistent.
It is easy to understand the cause. The solution is:

@ Keyframes run {0%, 8% {/* Action 1 */} 9.2%, 17.2% {/* Action 2 */}...}

Step 1: Move Between eight frames. 0% sets Action 1, and Action 1 ends at 8%.
Step 2: transition between 1.2 frames, 9.2% sets action 2, and Action 2 ends at 17.2%

Complete code:

1 <! DOCTYPE html> 2

Another implementation method is to use steps (), which is the step animation between frames. This is not written in w3c. First, paste a graph.

We can see that:
Steps (1, start): the animation jumps to 100% from the beginningThis frame (not the entire cycle)End
Steps (1, end): Keep the 0% styleThis frame (not the entire cycle)End
You can also directly set the animation-timing-function: step-start/step-end
The step-start effect is equivalent to steps (1, start), and the step-end effect is equivalent to steps (1, end)

The final effect may be due to recording problems. If you are interested, you can directly copy the code and run it:

Complete code:

1 <! DOCTYPE html> 2