CSS3 Animation Animation

Key frame

What is a keyframe. As with the description of the flash principle, we know that the animation is actually composed of many static images, the first such static picture can be expressed as a frame. The keyframes are those that reflect physical changes in the animation process.

As in the previous example, the element div was changed from 50x50 Red to state 100x100 yellow, and the two states at the end played a key role in defining the animation. So these two states are keyframes for the entire animation.

@keyframes Defining animation KeyFrames

Through the previous nonsense now we see @keyframes will not feel this @ symbol is more awkward. We use it to define keyframes for animations.

The key two points defined in the CSS code are the name and the point in time.

Where the state section specifies the style of the element, so it can be a variety of CSS code you want, color dimension transparency rotation, and so on. ' From ' specifies the starting state of the animation process, and ' to ' specifies the state of the element at the end of the animation. So the entire animation is the process of changing from the start state to the state specified by the from.

If we have created an HTML document, its structure is simply a div for rendering the animation.

So for the above example, the definition of animation is probably the following:

• Definition of animation named ' Example '
• Specifies an element length of 50px width 50px with a red background color at the start of the animation.
• Specify the element length 100px width 100px at the end of the animation, and the background color is yellow
• For browsers that use the WebKit kernel, such as Chrome,safari, you need to use the-webkit-prefix, so you need to write two sets of code to make sure you work in Chrome or safari

Of course the definition of a state is not limited to the start and end of the two point-in-time, we can specify the state of any point-in-time element in an animation process. Here's another way to define keyframes.

The above defines the state of 0%,50%,100% three point-in-time elements throughout the animation process. For example, we define an animation with a duration of 10 seconds, then 0% is when the animation starts 0 seconds, the code after 0% specifies what the element will be at the beginning of the animation, and then 50% is the animation to 5 seconds when the element is what it looks like. The last 100% is the state of the element for the animation to 10 seconds, which is the end of the animation.

So in this way we can specify the number of element states without limits, and you can control the entire animation more precisely.

CSS3 Animation Properties

When we use @keyframes to define an animation, it does not perform any effect until we apply the animation to the corresponding element through the animation property.

The complete syntax for the CSS3 animation property is as follows:

Animation:name Duration timing-function delay iteration-count direction;

• Name is a keyframe named with the @keyframes definition
• Duration literally means specifying the duration of the animation
• timing-function Specifies how the animation plays, referring to the way in which the transition from one state of an element to another state is used, the values available are Linear,ease, ease-in, Ease-out, Ease-in-out, Cubic-bezier (N,n,n,n). The discussion of each method is beyond the original plan, here is just a list
• DELAY specifies a delay so that the animation does not play immediately
• ITERATION-COUNT specifies the number of times the animation repeats, you can specify a number, or you can use ' infinite ' to always play
• direction Specifies whether the animation is played backwards or alternately, the values available are normal, reverse, alternate, alternate-reverse

Where name and duration are required, if you do not specify a duration default of 0, that is, the animation lasts 0 seconds, so you cannot see the animation effect.

Now that the keyframes have been defined, we use animation to apply them to the corresponding elements.

Now open the page and you'll see the top animated effect.

Specify the version of a keyframe using percentages

The image of a percentage is described above we can specify the state of the element at any point in the animation process, and it is very easy to turn the above version into a percent version.

We simply change the definition of the keyframe from the to the desired percentage of time.

For example, the starting state does not change, adding an animation to 50% when the color is yellow size 75x75, and finally the green size is 100x100.

Effect:

Reciprocating animations

If we specify direction as alternate, when the animation is played to the end, it will return to the beginning of the animation in the opposite direction, and then play alternately.

With the basic understanding above, we can write some simple animations. But the really amazing CSS3 animation is going to take a bit of work, and here is not going to go on, perhaps I will introduce an example in the next article.

Another working demo (use Chrome browser to see the effect):

Reference:

• Http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
• Http://www.w3schools.com/css/css3_animations.asp

Transferred from: http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html

CSS3 Animation Animation