Animation effects in CSS3-------Day72

Remember, in the front has also realized "only use CSS to let div move up", remember how it was realized at that time, yes,transition, for the more limited, only the angle of rotation ah, long and wide ah, and so on, so that is not moving up, it is really better to say that the transition, Of course, it has a limitation, only when the mouse is placed on the trigger, only one style becomes another style, the change is more monotonous, and the real implementation of animation effect, CSS3 also has a very effective method:@keyframes.

First of all, to know its specifications and usage

Remember the use of transition: add div{transition:width (height, transform) 5s;width:100px to the original style, and then div:hover{width:300px}, This is how the transition works, so what about the animation?

The animation here first depicts the overall effect of the animation, and then binds the object that implements the animation

Here is a record of the example modified in W3cschool:

@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;transform:rotate (100deg);} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}} @-moz-keyframes myfirst/* Firefox */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;transform:rotate (100deg);} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}} @-webkit-keyframes Myfirst/* Safari and Chrome */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;transform:rotate (100deg);} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}} @-o-keyframes myfirst/* Opera */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; Top:0pxl;transform:rotate (100deg);} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}

Then find an object to bind, and this object you find a problem, left and top to depict the distance ah, must be absolute position , so to write the HTML part

<div style= "Width:100px;height:100px;position:absolute;" ></div>

Then bind:

Div{animation:myfirst 5s;-moz-animation:myfirst 5s;/* Firefox */-webkit-animation:myfirst 5s;/* Safari and Chrome */-o-an Imation:myfirst 5s;/* Opera */-moz-animation-iteration-count:4;}

Broad StepsWe learned that, 1: First of all, the "animation effect" has been completed, 2, find the object to achieve the animation effect, 3, the animation effect and the implementation of the object to bind, if only.

But one thing we need to be aware of is that it's not just a binding, it's conditional , so what's the condition?

1. Determine which animation effect is binding, 2, how long it takes to achieve animation effect, if not write, the default is not to run;

This is, of course, the most basic requirement, and we can do it better for the animation effect , but also from the following several properties:

1, Animation-iteration-count, set the number of times the animation effect is executed, here also to be clear, when the full number of times run, will still disappear

2, Animation-direction, is the animation effect how to achieve, is normal or reverse order;

3, Animation-play-state, animation operation effect, pause or run;

4, Animation-delay, when the animation began to run

And so on, through these attributes, we can better personalize the performance of their own animation it?

CSS3 in the original has already seen so many, in this weekend should be a good summary of relevant content, these days will not see a few places to learn under the good

Animation effects in CSS3-------Day72