CSS3 frame animation in-depth exploration, talk about the actual problems encountered in the project

Add a subtitle first xd

--How to solve background-size for 100% under processing @keyframes

It was in the project that I encountered a subtitle that led me to a deeper inquiry.

just a little bit of basic CSS3 animation.

The animation implementation of CSS3 is implemented by the combination of attribute animation and @keyframes.

Please refer to this article specifically, the female Cheng has a very detailed and wonderful exposition

https://24ways.org/2012/flashless-animation/

Finally realized a cat running on the screen with video scrolling

Why not GIF?

GIF animation is a typical frame animation, GIF in the browser is also supported very well. The mobile phone is also very good performance.

The only drawback is that the volume is too large, which in turn causes the low-end machine to eat memory lag.

Use CSS3 to achieve animation, will significantly reduce the volume of the picture, that is, with the sprite form

In general, the animation presented on the online article is made of PX as a unit of size or distance.

The animation implementation of CSS3 is implemented by the combination of attribute animation and @keyframes.

See this article specifically, the female programmer has a very detailed and wonderful elaboration

https://24ways.org/2012/flashless-animation/

Finally realized a cat running on the screen with video scrolling

In general, the animation presented on the online article is made of PX as a unit of size or distance.

{      0% {background-position: 0 0;} {background-position: -880px  0;}      }

Animation implementations such as:

. Anim-div {    background-image: "The figure address of the egg"    animation:walk-cycle 1s steps (one) infinite;}

The above is the simplest implementation of frame animation code.

Well.. It looks like it's OK on the PC.

problems encountered in the actual project.

If it's on the phone,

In order to easily adapt to different screen sizes, it is common practice for the artist to make a relatively large figure, such as the iphone5 as the benchmark, 320px width.

Let the artist provide us with a 640-width picture. Instead of setting a different background image for each screen, we can scale to fit most of the screen by setting background-size:100%.

Then it becomes the following code.

. Anim-div {    background-image: "The figure address of the egg"    background-size:100%    animation:walk-cycle 1s steps (11) Infinite;}

Yes, I added a background-size:100%.

As a result, I was forced to. The animation is not as wavy as expected. Now it's a new style of wave.

Search for a half day Google to find a similar answer, and then the solution is

{      0% {background-position: 0 0;} {background-position: 110%  0;}      }.anim-div{    background-image: "The figure address of the egg"    background-size:1100%    Animation : walk-cycle 1s steps (one) infinite;}

The first step: Background-size is set to the number of frames *100%, which is 1100%

Step Two: Change the keyframe to a percentage and fill it with the last frame

The formula is: (100/(number of frames-1))%+100%

The formula is: (100/(number of frames-1))%+100%

The formula is: (100/(number of frames-1))%+100%

Important Words three times so the formula is written three times

In this example:

(100/(11-1))% + 100% = 110%

background-position:110% 0;

Why make up a frame?

Brought out another topic.

In doing Biu Community HTML5 Display page, accidentally found keyframe implementation of the motion diagram cycle process will lose a frame , looking for a long time finally have a foreign peer study this phenomenon of the article,

When using CSS3 's steps mates with a percentage value of background-position, the last frame in the process of looping frames is not displayed

Below is I found the analysis of foreign users of the data and examples of testing, the example of viewing the source code can see the following analysis logic

Write the test address:

http://willian12345.github.io/test-demo/step-keyframes/

Or

http://sheldonwang.com/test-demo/step-keyframes/

Next analyze:

{ 0% {background-position: 0 0;}  {background-position: 0 100%;}  }

{animation: countdown 1s steps (2) infinite; background: url (1-2.png) 0 0 no-repeat;}

You think that. Flick can animate animations between 1 and 2

But it's not, it's just moving around halfway between 1 and 2.

Let's try adding "end" or "start" properties to see if it's OK.

{animation: countdown 1s steps (1, end) infinite;}  {animation: countdown 1s steps (1, start) infinite;}

They seem to jump directly past the start or end of the frame

A comprehensive review of the relevant information, end and start control is a frame loop after the end of the connection to continue the loop is which frame, the phenomenon is

If End is set, then the last frame is ignored, and if Start is set, then the first frame is ignored. There is a map of the corresponding description, I did not see it anyway.

Let's use a 3-frame diagram to verify

{animation: countdown 1s steps (2, end) infinite; background: url (1-2-3.png) 0 0 no-repeat;}

Sure enough, the end effect is 1 and 2 of the repeated jumps, directly ignoring the 3

To make it appear normally in turn, you need to fill in a frame.

{ 0% {background-position: 0 0;}  {background-position: 0 150%;}  {animation: countdownTo3 1s steps (3) infinite;}

Set to 150%, which is the height of 50% (one frame)

So when it's two frames,

{ 0% {background-position: 0 0;}  {background-position: 0 200%;}  {animation: countdownTo2 1s steps (2) infinite;}

I'll use the formula again.

Background-position-y: (100/(2-1))% + 100% = 200%

Well, so is the y axis is 200% i.e.: background-position:0 200%;

Concluding remarks

At first, I did not pay attention to these small details, until it was written to meet, and then solve. So, just say you can write more and write more.

Until Financial freedom!!! , Financial freedom!!! , Financial freedom!!! Important words, three times.

I wish you all the little friends who read this article

================================================= proudly split Line ===============================================

Reprinted Annotated, Blog Park

[Email protected]

Sheldon.wang

github.com/willian12345

CSS3 frame animation in-depth exploration, talk about the actual problems encountered in the project