Deep understanding of CSS3 Animation frame (steps) and css3animation

Deep understanding of CSS3 Animation frame (steps) and css3animation

Author: Aaron's blog

Web: http://www.cnblogs.com/aaronjs/p/4642015.html

Slave --------------------------------------------------------------------------------------------------------------------------------

CSS3 was useful five years ago, including cutting-edge technologies for corporate projects.

I recently used a large number of CSS3 animations to write MOOC's Tanabata themes. However, I found that the attributes of CSS3 animations are very deep, here, I will write down my understanding about the steps attribute of the frame animation.

We know that the Animation of CSS3 has eight attributes.

Animation-name
Animation-duration
Animation-delay
Animation-iteration-count
Animation-direction
Animation-play-state
Animation-fill-mode
Animation-timing-function

Most of them are introduced from 1 to 7, but animation-timing-function is the attribute of time control.

In addition to the commonly used cubic besell curves, there is also a confusing steps () function.

By default, animation is transitioned in the transition mode. It inserts a complementary animation between each key frame, so the animation effect is consistent.

Except for transition, all transition functions, such as linear and cubic-bezr, will insert a population for them. However, for some effects, skip between key frames is not required. In this case, the steps transition mode should be used.

Animation-timing-function specifies the animation speed curve

However, a very important steps is missing

In simple terms, we have always used animation to basically achieve linear gradient animation.

For example

The position ranges from the start point to the end point at a fixed time.
Linear variation of size at fixed time
Linear color change, etc.

Linear Animation: http://sandbox.runjs.cn/show/5u3ovsfb

Capture CSS as follows

. Test1 {width: 90px; height: 60px;-webkit-animation-name: skyset;-webkit-animation-duration: 2000 ms;-webkit-animation-iteration-count: infinite; /* infinite loop */-webkit-animation-timing-function: linear;} @-webkit-keyframes skyset {0% {background: red;} 50% {background: blue} 100% {background: yellow ;}}

Timing-function: linear defines a constant-changing animation, that is, within two seconds, from red to blue to yellow, it is a linear color change.

If you want to implement the frame animation effect rather than linear changes, you need to introduce the value of step. In other words, there is no transition effect, but a frame change.

You can also watch the test frame animation: http://sandbox.runjs.cn/show/t5xqz6i4

Understanding steps

The steps function specifies a step function.

The first parameter specifies the number of intervals in the time function (must be a positive integer)

The second parameter is optional. It accepts the start and end values and specifies that a step change occurs at the start or end of each interval. The default value is end.

Step-start is equivalent to steps (1, start). The animation is divided into one step. When the animation is executed, the left-side endpoint is started;

Step-end is equivalent to steps (1, end): an animation is divided into one step. When an animation is executed, the animation starts with the ending endpoint. The default value is end.

Look at W3C standard transition-timing-function

Understanding of the error of the first steps parameter:

Steps (5, start)

The first parameter number in steps () is the specified interval, that is, the animation is displayed in n stages. It is estimated that most people understand the number of keyframes writes.

For example:

@-webkit-keyframes circle {    0% {}    25%{}    50%{}    75%{}    100%{}}

I have always thought that 5 in steps (5, start) refers to 0% 25% 50% 75% in keyframes and 100% is divided into 5 intervals.

Why is this misunderstanding? Let's look at an example.

When there are only two rules for keyframes key frames, assume we have a PX Sprite.

@-webkit-keyframes circle {    0% {background-position-x:0;}    100%{background-position-x: -400px;}}    

When steps (5, start) is set at the moment, Frame Animation will appear on the five images, because 5 of steps splits the 0%-100% rule into 5 internal points.

Actually, such a key frame effect is performed internally.

@-webkit-keyframes circle {    0% {background-position-x: 0;}    25% {background-position-x: -100px;}    50% {background-position-x:-200px;}    75%{background-position-x: -300px;}    100%{background-position-x: -400px;}}　　

Slightly modify this rule and add it to the 50% status.

@-webkit-keyframes circle {    0% {background-position-x: 0;}    50% {background-position-x: -200px;}    100%{background-position-x: -400px;}}

The same steps (5, start) effect will be messy.

You will be confused at the moment, so the key is to understand the targeting points of the first parameter. First, introduce a core point:

Timing-function acts between every two key frames, instead of the entire animation.

The first parameter is well understood. steps is set between two key frames rather than the entire keyframes. Therefore, the first parameter corresponds to the steps change each time.

In other words, it is also changed 5 times between 0 and 25 ,? 5 changes between 25-50, 5 changes between 50-75, and so on

The second parameter is optional. It accepts the start and end values and specifies that a step change occurs at the start or end of each interval. The default value is end.

The case study shows the difference between step-start and step-end.

@-webkit-keyframes circle {    0% {background: red}    50%{background: yellow}    100% {background: blue}}

Step-start: switch between yellow and blue

Step-end: switch between red and yellow

Both of the two parameters will selectively skip the front and back sections. start skips 0%, and end skips 100%.

During the change process, step-start fills the animation with the display effect of the following frames, so 0% to 50%? Yellow is displayed.

The opposite of step-end is that the display effect of the above frame is filled with the interval animation, so 0% to 50% directly shows the red

Reference A w3c step-by-step Working Machine Drawing

 

Summary:

Steps function, which can be used to input two parameters. The first one is an integer greater than 0, which divides the interval animation into a specified number of Small Interval animations, then, the display effect is determined based on the second parameter.

After the second parameter is set, it is actually synonymous with step-start and step-end. You can judge the Display Effect in the split interval animation. We can see that steps (1, start) is equal to step-start, steps (1, end) is equal to step-end

The core point is that timing-function acts between every two key frames, rather than the whole animation.

Demo: http://designmodo.com/steps-css-animations/