CSS3 Show wonderful animation effects CSS3 Animation properties

Article Introduction: because of CSS3, animation will be all possible.

The enthusiastic css3 undoubtedly attracted a lot of front-end developers of the eyeball, but in CSS3 animation properties is the new feature of the main signboard, said CSS3 animation properties have to remind people of these three attributes: Transform﹑transition﹑animation. Transform properties Although it seems to achieve the effect of animation, but the essence is static, the white point is actually a graphic deformation tool; The transition property is a simple animation property, the operation is very simple; here we introduce the animations attribute , this is a veritable animation attribute, although the official is not too much to introduce, but briefly explained that this property is an extension of the transition property, but the function is very powerful, animations can define multiple keyframes and define the attributes of each keyframe elements of the value to achieve complex The animation effect. So what kind of animation can animation make? It can be said that, as long as you are creative, you will toss, then everything is possible.

View Sample

I believe that this attribute is also more understanding, so it is not too much to introduce its basic knowledge. Not very understanding, you can find the basic knowledge on the Internet, there are a lot of relevant information can be consulted.

Here's a very important tag to tell you: KeyFrames. How does the animation move? It's all on it. KeyFrames's basic principles are similar to Flash's timeline and keyframes, so you can create a rich animation. Take a look at a simple example:

@keyframes demos{

From{transform:translate (0,0);}

20%{transform:translate (20,20);}

40%{transform:translate (40,0);}

60%{transform:translate (60,20);}

80%{transform:translate (80,0);}

To{transform:translate (100,20);}

}

The example above sets up an animation called "demos", the From, 20%, 40%, 60%, 80% and to respectively represent the corresponding property effects at different points in time (from and to can be represented by 0% and 100%, noting that 0% may not be abbreviated to 0). This shows that we can set a number of time points of the corresponding property effects, this way greatly enriched our animation effect. At any two points in time, animation will automatically calculate the intermediate transition effect, and we can also set the animation to control the time period to achieve high-quality animation. Compared to flash, animation animation properties are no less, the biggest advantage is the production of simple, just a few lines of code, but can render a rich animation, this is the flash to the point.

The link above is for everyone to organize an example page, the example is part of my own production, part from the network collection, designed to show you more and more wonderful animation effect, so that you can learn more, if you also have good idea, welcome to share to us, add to this page, This sample page will also be updated periodically, so that more people know that because of CSS3, animations are all possible.

Note: Because the sample page is not perfect, the attachment download is not available for the time being.