Animation effects in CSS3 ------- Day72, css3 ------- day72

Animation effects in CSS3 ------- Day72, 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.

 <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-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.

How to Use CSS3 for transition and animation?

Div. trans {width: 100px; height: 100px; background: gray; transition: width 2 s;-moz-transition: width 2 s;/* Firefox 4 */-webkit-transition: width 2 s;/* Safari and Chrome */-o-transition: width 2 s;/* Opera */} div. trans: hover {width: 300px;} div. ani {width: 100px; height: 100px; background: red; position: relative; animation: mymove 5S infinite;-moz-animation: mymove 5S infinite; /* Firefox */-webkit- Nimation: mymove 5S infinite;/* Safari and Chrome */} @ keyframes mymove {from {left: 0px;} to {left: 200px ;}} @-moz-keyframes mymove/* Firefox */{from {left: 0px;} to {left: 200px ;}} @-webkit-keyframes mymove/* Safari and Chrome */{from {left: 0px;} to {left: 200px ;}} at the beginning, W3C CSS Workgroup refused to add CSS3 transition and animation to the official standard. Some members thought that the transition effect and animation are not style attributes and can be implemented using scripts. Syntax: transition: property duration timing-function delay; Description: ValueDescriptiontransition-property specifies the name of the CSS attribute to be changed transition-duration specifies how much time the transition effect takes (s/MS) transition-timing-function specifies the speed of the transition effect. transition-delay defines the delay time of the transition effect. example: <style type = "text/css"> div {width: 100px; height: 100px; background: red; transition: width 2 s;-moz-transition: width 2 s;/* Firefox 4 */-webkit-transition: width 2 s;/* Safari and Chrome */-o- Transition: width 2 s;/* Opera */} div: hover {width: 300px;} </style> <div> </div> 2. animationCSS animation (Animations) simply means secretly changing a certain value of CSS within a certain frequency within a fixed animation time, so as to achieve visual conversion animation effect. Next, let's take a look at the next simple example: <style type = "text/css & quot ...... the remaining full text>

CSS3 for animation problems, after the animation is stopped, make his display equal to none, and then let him equal to block, there will be repeated animation Problems

JQuery can be implemented as follows:
1. fadeIn (speed, [callback]) fades in by changing the opacity of all matching elements, and is completed after an animation can trigger a callback function. This animation only adjusts the opacity of the element, that is, the height and width of all matching elements do not change.

Parameter speed (string, number): one of three predefined speed strings ("slow", "normal", or "fast") Long millisecond values (for example, 1000) that represent an animation or

Callback (function): (optional) for example, 600 milliseconds slow fade

Code: $ ("P") fade in ("slow");

A section that quickly fades in 200 milliseconds will pop up a dialog box with jQuery code :. "Animation completed" $ ("P") fade in ("fast", function (){

Alert ();

});

2. fadeOut (speed, [callback]) enables all elements matching the fade-in and fade-out effect by changing the opacity, and triggers a callback function after the animation is complete. This animation only adjusts the opacity of the element, that is, the height and width of all matching elements do not change.

Parameter speed (string, number): one of three predefined speed strings ("slow", "normal", or "fast") Long millisecond values (for example, 1000) that represent an animation or

Callback (function): (optional) features such as slow fading with section 600 milliseconds

Code: $ ("P "). Fade out ("slow ");

200 ms Dialog

The code quickly fades. $ ("P") fade out ("fast", function (){

Alert ("animation complete .");

});

3. fadeTo (speed, transparency, [callback]), all matching elements are gradually adjusted to the specified opacity, and an optional callback function is triggered to complete the opacity after the animation is completed. This animation only adjusts the opacity of the element, that is, the height and width of all matching elements do not change.

Parameter speed (string, number): indicates an animation or

Opacity (one of the three millisecond values of the predefined speed String Length (1000 cases) ("slow", "normal", or "fast"): Adjust 0 and 1) the number of opacity values between callback (function. (Optional) the function is 600 milliseconds and is slowly adjusted to 0.66 segments, with visibility related

Code 2/3. $ ("P") fadeTo ("slow", 0.66); $ ("P "). FadeTo ("slow", 0.66 );

The same version can be quickly adjusted to 200 in 0.25 milliseconds, and the transparency of the visibility is about 1/4. Then a dialog box is displayed, jQuery code: $ ("P "). FadeTo ("fast", 0.25, function (){

Alert () "animation complete .";
});