The use of animation attribute in CSS3

Before we begin to introduce animation we need to understand a special thing first, that is "keyframes", we call him "Keyframe", the friend who has played flash may not be unfamiliar to this thing. Now let's take a look at what this "keyframes" is. Before we use transition to make a simple transition effect, we include the initial attributes and final attributes, the rate at which the action time is started and a continuation action time, and the movement speed, in fact these values are an intermediate value, if we want to control a little bit more, Like what I'm going to do with the first time period, what to do in the second time period (in Flash to say, is the first frame I want to perform what action, the second frame I want to do what action), so we use transition is difficult to achieve, at this time we also need such a "keyframe" to control. So the CSS3 animation is the "keyframes" this property to achieve this effect. Let's take a look at KeyFrames first:

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:

CSS code copy content to clipboard

Keyframes-rule: ' @keyframes ' IDENT ' {' keyframes-blocks '} ';

Keyframes-blocks: [keyframe-selectors block]*;

Keyframe-selectors: [' From ' | ' To ' | Percentage] [', ' [' From ' | ' To ' | Percentage]]*;

Combine the grammar above.

CSS code copy content to clipboard

@keyframes IDENT {

from {

Properties:properties value;

}

Percentage {

Properties:properties value;

}

to {

Properties:properties value;

}

}

Or all in the form of percentages:

CSS code copy content to clipboard

@keyframes IDENT {

0% {

Properties:properties value;

}

Percentage {

Properties:properties value;

}

100% {

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.

Let's take a look at an example:

CSS code copy content to clipboard

@-webkit-keyframes ' Test ' {

0% {

margin-left:100px;

Background:green;

}

40% {

margin-left:150px;

Background:orange;

}

60% {

margin-left:75px;

Background:blue;

}

100% {

margin-left:100px;

background:red;

}

}

Here we define a "test" animation, his animation from 0% to 100% when the end, and also experienced a 40% and 60% two processes, the above code specifically: the test animation in the 0% element positioning to the left of the position of 100px background color green, The 40%-time element transitions to the left 150px position and the background color is orange,60% when the element transitions to left 75px, the back color is blue, and the last 100% ends the animation where the element returns to the beginning left 100px, and the back color turns red. Fake settings We only give this animation has 10s of execution time, then each of his execution states as shown in the following figure:

KeyFrames definition, how do we call the animated "test" that we just defined?

CSS3 's animation is similar to the transition attribute, which changes the attribute value of the element over time. The main difference is that transition needs to trigger an event (hover event or click event, etc.) to change its CSS properties over time, and animation can explicitly change the attribute values of element css over time without triggering any events. So as to achieve an animation effect. So that we can invoke animation animation properties directly in one element, and based on this, CSS3 's animation need to have explicit animated attribute values, which is back to what we said above, we need keyframes to define CSS attribute values at different times. To achieve the effect of changes in the elements in different time periods.

Let's take a look at how to call the animation property for an element

CSS code copy content to clipboard

. demo1 {

width:50px;

height:50px;

margin-left:100px;

Background:blue;

-webkit-animation-name: ' Wobble '//* animated property name, which is the animated name defined in front of us keyframes.

-webkit-animation-duration:10s;/* Animation Duration * *

-webkit-animation-timing-function:ease-in-out; /* Animation frequency, and transition-timing-function is the same * *

-webkit-animation-delay:2s;/* Animation Delay Time * *

-webkit-animation-iteration-count:10;/* definition of circular data, infinite for unlimited times * *

-webkit-animation-direction:alternate;/* Definition Animation Mode * *

}

The

CSS animation animation effect will affect the corresponding CSS value of the element, and throughout the animation, the change attribute value of the element is entirely controlled by the animation, and the animation will overwrite the previous attribute value. As the above example: Because our demo only changed the demo1 background color and the left margin at different time periods, its default value is: Margin-left:100px;background:blue; but when we do animation 0%, Margin-left : 100px,background:green; When executed to 40%, the attribute becomes: Margin-left:150px;background:orange, and when executed to 60% Margin-left:75px;background : Blue; When the animation executes to 100%: Margin-left:100px;background:red, the animation will complete, then margin-left and background two property values will be the main 100%, he will not produce superposition effect, Just one time overwrite the previous out of CSS properties. Just like our usual CSS, the last occurrence of the right root is the largest. When the animation finishes, the style returns to the default effect.