Animation effect in CSS3 ------- Day72

Animation effect in CSS3 ------- Day72

Remember, I used to implement "only use css to let the div move". Do you still remember how it was implemented at that time? Yes,TransitionIt is also quite limited in scope, such as the rotation angle, length, width, and so on. So it is not so much a dynamic term as a transitional term. Of course, it also has a limitation, it can be triggered only when the mouse is placed, but a style is changed to another style, and the changes are monotonous. To achieve the animation effect, css3 also has a very effective method:@ Keyframes.

First, you must know its specifications and usage.

Remember the usage of transition: Add div {transition: width (height, transform) 5S; width: 100px;} to the initial style, and then div: hover {width: 300px}. How can we achieve the transition effect?

The animation here isFirst, describe the overall animation effect, and then bind the animation object.

Here we use an example modified in w3cschool to record it:

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

In this way, you can find another object to bind. What is the problem with this object? left and top are used to describe the distance. It must beAbsolute positionWell, let's write the html section.

Then bind:

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

General stepsAs we can see, 1: first determine that the "animation effect" has been completed; 2. Find the object to implement the animation effect; 3. Bind the animation effect with the implemented object, that's all.

However, one thing we need to note is that it is not implemented by any binding.Binding is conditional.So what are the conditions?

1. Determine which animation effect is bound. 2. How long does it take to implement the animation effect? If you do not write the animation, the animation is not run by default;

Of course, this is the most basic requirement.Better animation EffectsYou can also set the following attributes:

1. animation-iteration-count: set the number of times the animation effect is executed. here we need to make it clear that after all the times are run, it will still disappear.

2. animation-direction: whether the animation effect can be implemented normally or in reverse order;

3. animation-play-state: animation running effect, pause or run;

4. animation-delay: When the animation starts to run

And so on. Through these attributes, we can better personalize our own animation effects.

Css3 has already read so much without knowing it. I should summarize the relevant content this weekend. I have learned more about the few places I haven't seen in the past few days.