Definition and invocation of animation animation in CSS3

Now often see a number of portal site topics used to CSS3 animation, I can not be outdated, this comb the animation knowledge bar, easy to use later. Next to the introduction AnimationDefinition and invocation of animation, before introducing animation need to understand keyframes, the English meaning is the key frame, it is equivalent to our flash inside the frame.

KeyFrames has its own grammar rules, his name starts with "@keyframes," followed by the "name of the animation" plus a pair of curly braces "{}", in parentheses are some different time style rules, a bit like our CSS style. For a style rule in a "@keyframes" that is made up of multiple percentages, such as between "0%" and "100%", we can create multiple percentages in this rule, and we give each percentage a different attribute for the element that needs to be animated. So that the element achieves a changing effect, for example, move, change element color, position, size, shape, etc., but one thing to note is that we can use "fromt" "to" to represent where an animation begins and ends, meaning that this "from" is equivalent to "0%" and " To "equivalent to" 100% ", it is worth saying, where" 0% "can not be like other attributes to the same as the percentage of the symbol omitted, we have to add the hundred sign ("% ") if not added, we this keyframes is invalid, does not have any effect. Because the units of the keyframes accept only the percent value.

KeyFrames can specify any order to determine the key position of animation animation changes. Its specific grammatical rules are as follows:

Keyframes-rule: ' @keyframes ' IDENT ' {' keyframes-blocks '} ';
Keyframes-blocks: [keyframe-selectors block]*;
Keyframe-selectors: [' from ' to ' percentage] [', ' [' in ' to ' percentage]]*;

None: Means No. Transform; represents one or more transformation functions, separated by spaces; in other words, we transform a variety of attribute operations on an element, such as rotate, scale, Translate three, but here we need to remind you that in the past we have superimposed effects are separated by commas (","), but the use of multiple properties in transform need to be separated by spaces. We remember that space is separated.

Take value:

The Transform property implements some of the same functionality that can be implemented with SVG. It can be used for inline (inline) elements and block-level elements. It allows us to rotate, scale, and move elements, and he has several attribute value parameters: Rotate;translate;scale;skew;matrix. Here are some examples of how to use these attribute value parameters separately:

I combined the grammar above.

@keyframes IDENT {from
{
properties:properties value;
}
Percentage {
properties:properties value;
} to
{
properties:properties value;
}
}

Where ident is an animated name, you can take, of course, semantics a little better, percentage is a percent value, we can add many such percentages, properties for CSS property names, such as Left,background, Value is the property value of the corresponding property. It is worth mentioning that our from and to respectively correspond to 0% and 100%. We've mentioned this before, too. So far the technology animation animation only WebKit kernel browser, so I need to add the-webkit prefix on the above, it is said that FIREFOX5 can support CSS3 animation properties.

As an official example, everyone can see clearly:

 @-webkit-keyframes  ' wobble '  {     0% {  
      margin-left: 100px;
        background: green;     &NBSP}      40% {      
  margin-left: 150px;
        background: orange;     &NBSP}      60% {      
  margin-left: 75px;
        background: blue;     &NBSP}      100% {      
  margin-left: 100px;
        background: red;     &NBSP}   } 

Here we define a "wobble" animation, his animation from 0% to 100% when the end, and also went through a 40% and 60% two processes, the above code specifically means: Wobble animation at 0% when the element is positioned to the left 100px position background color green , then the element transitions to the left 150px position at 40%, and the background color is orange,60% when the element transitions to left 75px, the back color is blue, and the last 100% end of the animation's position element returns to the beginning left 100px, and the back color turns red.

Define a good animation, how to invoke it, as follows:

. box {
width:50px;
height:50px;
margin-left:100px;
Background:blue;
-webkit-animation-name: ' wobble ';//* Animated property name, that is, the animated name defined in front of our keyframes/
-webkit-animation-duration:10s;/* Animation Duration * *
-webkit-animation-timing-function:ease-in-out/* Animation frequency, and transition-timing-function is the same * * *
-webkit-animat ion-delay:2s;/* animation delay time/
-webkit-animation-iteration-count:10;/* definition of circular data, infinite for unlimited times * *
-webkit-animati on-direction:alternate;/* Definition Animation mode */
}

Maybe the guys see it's not very well, let's take a look at the syntax of its properties and come back and see the example.

First, Animation-name:

Grammar:

Animation-name:none Ident[,none ident]*;

Value Description:

Animation-name: is used to define the name of an animation, which has a primary value of two: Ident is the animated name created by KeyFrames, in other words, the ident here is consistent with the keyframes in ident, if inconsistent, will not achieve any animation effect ; none is the default, and none will have any animation effects. In addition, we have the same property as the previous transition, we can attach several animation to an element, we only need to use commas "," separated.

Second, Animation-duration:

Grammar:

Animation-duration: [,]*

Value Description:

Animation-duration is used to specify the length of time that an element plays an animation, and the value: is a number in S (sec.) with the default value of 0. This property is the same as the Transition-duration method used in transition.

Third, Animation-timing-function:

Grammar:

Animation-timing-function:ease linear ease-in ease-out ease-in-out cubic-bezier (,  Umber>, ) [, Ease linear ease-in ease-out ease-in-out cubic-bezier (, , & Lt;number> )]*

Value Description:

Animation-timing-function: Refers to the element according to the advancement of time to change the value of the conversion rate of the attribute, simple point is the animation play mode. Like the transition-timing-function in transition, he has the following six modes of transformation: Ease;ease-in;ease-in-out;linear;cubic-bezier. The use of the specific method is as follows:

The value of transition-timing-function allows you to change the conversion rate of the attribute value according to the advance of time, Transition-timing-function has 6 possible values:

1, Ease: (gradually slow) default value, Ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0).

2, Linear: (uniform), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0).

3, Ease-in: (acceleration), the Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0).

4, Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0).

5, Ease-in-out: (Acceleration and deceleration), the Ease-in-out function is equivalent to the Bezier curve (0.42, 0, 0.58, 1.0)

6, Cubic-bezier: (this value allows you to customize a time curve), a specific cubic-bezier curve. (x1, y1, x2, y2) four values are specific to the point P1 and Point P2 on the curve. All values need to be in the [0, 1] area, otherwise it is not valid.

It is cubic-bezier to calculate the attribute value in the process of "conversion" through the Bezier curve, as shown in the following curve, by changing the coordinates of the P1 (x1, y1) and P2 (X2 and y2), the output percentage of the whole process can be changed. The initial default value is defaults.

Four, Animation-delay:

Grammar:

Animation-delay: [,]*

Value Description:

Animation-delay: is used to specify the element animation start time. The value is , in s (seconds), and the default value is 0. This property is the same as the Transition-delayy use method.

Five, Animation-iteration-count

Grammar:

Animation-iteration-count:infinite  [, Infinite ]*

Value Description:

Animation-iteration-count is used to specify the number of loops that an element plays animation, which can take a value of as a number, its default value is "1", and Infinite is an infinite number of loops.

VI. animation-direction

Grammar:

Animation-direction:normal alternate [, Normal alternate]*

Value Description:

Animation-direction is used to specify the orientation of the animation of an element, with only two values, the default is normal, and if set to normal, each loop of the animation is played forward, and the other value is alternate, whose role is to The animation plays forward in the occasional number of times, and the first odd number of times it plays in the opposite direction.

Seven, Animation-play-state

Grammar:

Animation-play-state:running paused [, Running paused]*

Value Description:

Animation-play-state is mainly used to control the playback state of element animations. It has two main values, running and paused where running is the default value. Their role is similar to our music player, you can stop the animation that is playing through paused, or you can replay the paused animation by running, our replay here is not necessarily from the beginning of the element animation, but from the point where you paused. In addition, if the animation is temporarily played, the style of the element will return to the original set state. This property currently has very little kernel support, so just a little mention.

We introduced the syntax and values of each attribute in animation, so we can combine the above to give the animation attribute a shorthand method:

Animation:[   < Animation-delay>  ] [, [ < animation-duration>    ]]*

As shown in the following figure

I believe that after reading the grammar, you should be very clear about the above examples. But then again the animation can be done, but compatible with its browser is not much Ah, currently only Apple, Google, Firefox support.