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

Remember, in the front has also realized "just use CSS to make div move Up", remember how it was realized at that time, yes,transition, against the more limited, there is only the angle of rotation ah, long and wide ah and so on, so say, not to move up, It's better to say it's a transition. Of course it is another limitation, only when the mouse on the ability to trigger, just one style into another style, change is more monotonous, and the real animation effect, CSS3 another very effective method:@keyframes.

First of all. To know its specifications and how to use it

Remember how transition is used: add div{transition:width (height, transform) 5s in the initial style. width:100px,}, and then div:hover{width:300px}, this is the way to achieve the transition effect, then what about the animation?

The animation here is the first to depict the overall effect of the animation. Then bind to the object that implements the animation

Here's a sample that changes in W3cschool to record:

@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;}}

This will then find an object to bind to. And this object you find a problem, left and top to depict 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 StepsThat's what we got. 1: First make sure "animation effect" is complete. 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 pay attention to. This binding is conditional because it is not possible to do so with a binding. So what are the conditions?

1, determine which of the binding is the animation effect, 2, the implementation of animation effects need to how long, assuming not to write, the tacit feel not to execute;

This is, of course, the most important requirement, and we are able to do better with the animation effect , and we can set it from the following properties:

1, Animation-iteration-count. Sets the number of times a set animation effect executes, and here's a little bit more, when all the times are done, it will still disappear.

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

3, Animation-play-state, animation of the implementation effect. suspension or execution;

4, Animation-delay, when the animation starts to execute

Wait a minute. Through these properties. We can be more personalized to achieve their own animation effect it?

CSS3 in the original has already seen so many. This weekend should be a good summary of the relevant content. You can learn a few places you haven't seen these days.

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