Deep understanding of CSS3 Animation Frame animation (steps)

Aaron's Blog

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

--------------------------------------------------------------------------------------------------------------- -----------------

CSS3 I have been useful 5 years ago, including company projects have always been in the forefront of technology.

Recently in the writing of the festival network of Tanabata theme, with a lot of CSS3 animation, but really precipitate down carefully to deep CSS3 animation of the various properties found or very deep, here to write about the frame animation steps Property Understanding

We know that CSS3 's animation has eight properties

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

1-7 of them are mostly introduced, but animation-timing-function is the attribute of control time

There is a confusing steps () function in addition to the three-time Bezier curve that is commonly used in the value.

The animation is ease by default, and it inserts motion tweens between each keyframe, so the animation effect is consistent

In addition to transition functions such as ease,linear, Cubic-bezier, they are inserted into a tween. However, some effects do not need to be tween, only need to jump between keyframes, then you should use the steps transition mode

Animation-timing-function speed curve of the specified animation

The above W3school Web site to the use of methods, but missing out a very important steps

To put it simply, we have been using animation basically to achieve linear gradient animation

Such as

Position at fixed time from start to finish
The size changes linearly at a fixed time
Linear changes in color, etc.

See Effect linear Animation: HTTP://SANDBOX.RUNJS.CN/SHOW/5U3OVSFB

Intercept CSS as follows

. test1 {    width:90px;    height:60px;    -webkit-animation-name:skyset;    -webkit-animation-duration:2000ms;    -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 variation of the animation, that is, within 2 seconds, from red to blue to yellow, is a very linear color change

If you want to achieve the frame animation effect instead of linear changes need to introduce step this value, in other words is no transition effect, but a frame of the change

You can also see 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, accepting the start and end two values, specifying a step change at the start or end of each interval, and the default is end.

Step-start is equivalent to steps (1,start), the animation is divided into 1 steps, the animation is executed as the beginning of the left end of the section to start;

Step-end is equivalent to steps (1,end): The animation is divided into one step, and the animation executes with the end endpoint as the beginning and the default value to end.

Look at the norm Transition-timing-function

Steps the wrong understanding of the first parameter:

Steps (5,start)

Steps () The first parameter number is the specified interval, that is, the animation is divided into an n-step stage display, estimated that most people understand is keyframes write the number of changes

For example:

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

I've always thought that 5 of steps (5,start) is referring to the keyframes in 0% 25% 50% 75% 100% divided into 5 intervals

Why this understanding error occurs, let's look at an example

KeyFrames keyframes are only 2 rules when we have a 400px-length sprite chart

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

Now set steps (5,start) then you will find that 5 pictures will appear the effect of frame animation, because the steps in the 5 0%–100% rules, the internal divided into 5 equal portions

The actual internal execution of such a keyframe effect

@-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;}}

Change this rule slightly to add a 50% state

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

Then the same use of steps (5,start) effect will be messed up

You'll be confused at the moment, so the key to understand the point of the first parameter is to first introduce a core point:

timing-function function between every two keyframes, not the entire animation

So the first parameter is well understood, steps's settings are for two keyframes, not the entire keyframes, so the first parameter pair – the number of times corresponds to each steps change

In other words, 0-25 changes between 5 times,? 25-50 Changes 5 times, 50-75 changes between 5 times, etc.

The second parameter is optional, accepting the start and end two values, specifying a step change at the start or end of each interval, and the default is end

Look at the difference between the step-start,step-end by the case

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

Step-start: Yellow and blue switch to each other

Step-end: Red and yellow switch to each other

2 parameters will be selective skip the front and back parts, start skipping 0%,end skip 100%

Step-start in the process of change, are the following frame of the display effect to fill the interval animation, so 0% to 50%? The yellow yellow is displayed directly.

Step-end, in contrast to the above, is the display effect of the above frame to fill the interval animation, so 0% to 50% directly shows Red

A diagram of the working mechanism of a step that is quoted by the consortium

Summarize:

The steps function, which can pass in two parameters, the first is an integer greater than 0, he is to divide the interval animation into a specified number of small interval animation, and then according to the second parameter to determine the display effect.

The second parameter is set in fact and step-start,step-end synonymous, in the small interval animation to determine the display effect. As you can see: Steps (1, start) equals Step-start,steps (1,end) equals step-end

The core point is that timing-function acts on every two keyframes, not the entire animation.

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

Deep understanding of CSS3 Animation Frame animation (steps)