About CSS3 Animation animations

Before introducing animation it is necessary to understand one thing first, that is "keyframes", we call him "key frame";

When using transition to create a simple transition effect, it includes the initial properties, the final properties, and the time, speed curve, and start time required to complete the transition, but these are more granular, such as what I want to do with the first time period, The second time period to perform what action, just through the transition is difficult to achieve, at this time need to "keyframe" this thing, we will look at the "keyframe";

"Keyframe" is named after "@keyframes", followed by the "name of the animation", plus a pair of curly braces "{}", the parentheses are some of the different time periods of the style rules (a bit like the style of our CSS), a "@keyframes" The style rules in are composed of several percentages, from "0%" to "100%";

We can create multiple percentages in this rule, adding different attributes to the elements that need to be animated in each percentage, so that the elements reach a changing effect, such as moving, changing element color, position, size, shape, etc.

It should be noted that we use "fromt" "to" to represent an animation from where to start, to which end, that is, the "from" is equivalent to "0%", and "to" equivalent to "100%" (Note: where "0%" must be added to the percent symbol ("%"), if not added, This keyframes will be invalid because keyframes units only accept percent values);

Syntax for a chestnut:

After keyframes is defined, how do we need to invoke the animated "Mymove" that we just defined? At this point you need to define the animation attribute for the element;

There are eight properties on the W3school website animation:

There are also two animation-play-state (specify whether the animation is running or paused), Animation-fill-mode (specifies if the animation effect is visible before or after playback);

Next, you can invoke the "Mymove" animation that you just wrote by defining the animation attribute for the element; directly on the code:

With the above two pieces of code we can see the effect of an orange div width increase;

The basic theory of animation has been introduced here almost, but ... We have found that the above-produced animation effects are gradient transition type; from animation-timing-function, we know that the speed curve of animation-timing-function specifies animation:

Animation-timing-function by default in ease way, in addition to ease, the above linear, cubic-bezier and other transition functions will be inserted between each keyframe motion tween, so the animation effect appears to be consistent But sometimes the effect does not need to tween, but the need to jump between key frames, in fact, timing-function value in addition to the above also has a steps () function, this should use the steps transition mode to achieve the effect of frame jumping;

The steps () function specifies a step function; He has two parameters, the first parameter specifies the number of intervals in the time function (must be a positive integer), the second parameter is optional, the start and end two values are accepted, and the default is end, which is the step change at the beginning or end of each interval;

Steps () The first parameter is the specified number of intervals, that is, the animation is divided into stages of the stage display, it is easy to mistakenly understand that is keyframes write the number of changes, think Steps (5,start) 5 refers to the keyframes of 0% 25% 50% 75% 100% divided into 5 intervals;

@-webkit-keyframe name{ 0% {} 25% {} 50% {} 75% {} 100%{} }

Not really; To understand the first parameter key to understand his point of view, here is the need to introduce a core point: Timing-function is applied between every two keyframes, not the entire animation;

In this way the first parameter is well understood, that is, the steps setting is for two keyframes, not the whole keyframes; so the first parameter is set the number of changes in each step, in other words, set the change between 0-25 5 times, 25-50 Change 5 times, 50-75 changes 5 times, etc.;

The second parameter is optional, accepting the start and end two values, specifying a step change at the beginning or end of each interval, and the default is end; The difference between Step-start and Step-end is looked at 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 selected to skip the pre-and post-section, 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% directly shows the yellow yellow;

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

/********* OK, finishing, on the sauce, eat to La la la ******/

The Frame animation section of this article refers to the "deep understanding of the CSS 3 animation frame animation" from Allen great God, the original address is as follows:

by aaron:http://www.cnblogs.com/aaronjs/p/4642015.html

About CSS3 Animation animations