About. Animate () function and transition in CSS3

When writing your own project encountered such an effect, the left menu button click on the pop-up menu, the menu button becomes X-shaped. (Reference keyword: Burger button http://www.htmleaf.com/Demo/201506232094.html)

This is probably the animation effect in the GIF below:

The approximate animation effect is as follows

1. First horizontal line (DIV) rotate-45deg

2. The second horizontal line disappears gradually

3. Third horizontal line rotate 45deg

Like the previous link in the pure CSS3 implementation of the effect, change the element: hover CSS style sheet on the line.

Because the animation is now triggered with a click, I think of jQuery. Animate () functions and transition in CSS3. The natural way to do this is the following: (test environment is Chrome browser)

1 function (event) {2  event.preventdefault (); 3 $ ("Div:last-child"). Animate (4  {5 ' transition ': ' Rotate (45deg) '  6 },7 });    

However, it has no effect. Baidu down, there is no better way to solve.

But it is common to say that the. Animate () function is not shared with the CSS3 transition.

Then on the stack overflow found a detailed answer, Link posted: Http://stackoverflow.com/questions/5462275/animate-element-transform-rotate

This answer is organized and summarized below.

1.. animate () and transition are still shared

The first thing to be clear is that the animate () function cannot manipulate changes in CSS properties that are not represented by a number.

CSS styles are set using DOM names (such as "fontSize") instead of CSS names (such as "font-size"), and you can use "+ =" or "-=" to create relative animations.

This is also used with. Animate () and transition, whereas rotate (45deg) is not a numeric value, but a string. So here you need to use the Step function section in the. Animate () function to paste the code first:

1 @keyframes Rotater{2 From {3 -moz-transform:Translatey (0px) rotate (0);4 -ms-transform:Translatey (0px) rotate (0);5 -webkit-transform:Translatey (0px) rotate (0);6 Transform:Translatey (0px) rotate (0);7}8  to{9 -moz-transform:Translatey (7px) rotate (45deg);Ten -ms-transform:Translatey (7px) rotate (45deg); One -webkit-transform:Translatey (7px) rotate (45deg); A Transform:Translatey (7px) rotate (45deg); -} - }

1$ ("Div:last-child"). Animate ({textindent:0}, {2Stepfunction(now, FX) {3$( This). CSS ('-webkit-animation ', ' rotatel 1s cubic-bezier (0.5, 0.2, 0.2, 1) forwards '); 4$( This). CSS ('-ms-animation ', ' rotatel 1s cubic-bezier (0.5, 0.2, 0.2, 1) forwards '); 5$( This). CSS (' animation ', ' rotatel 1s cubic-bezier (0.5, 0.2, 0.2, 1) forwards '); 6         },7Duration: ' Slow '8}, 1000);

The step function here is well understood, that is, the function that is called after each step of the animation execution is completed.

The animation effect is essentially a period of time (very short) changes in the picture, the step function is the function called every time.

Use the step () function to avoid specifying the limitations of CSS styles, which are recorded here.

Attach the explanation. Animate () function Link: http://www.css88.com/jqapi-1.9/animate/

2. Do not use the. Animate () function, using the. addclass () function

In the past, the Chinese and foreign netizens have generally indicated that they should not use the. Animate () function and the CSS3 transition.

So there was a reply from the following answer, according to the answer of the Lord, I posted the code:

1 Div:last-child.rotatel-addclass{2 -webkit-transition:All 1s ease-in-out;3 -moz-transition:All 1s ease-in-out;4 -o-transition:All 1s ease-in-out;5 -ms-transition:All 1s ease-in-out;6 transition:All 1s ease-in-out;7 -moz-transform:Translatey ( -7px) rotate ( -45deg);8 -ms-transform:Translatey ( -7px) rotate ( -45deg);9 -webkit-transform:Translatey ( -7px) rotate ( -45deg);Ten Transform:Translatey ( -7px) rotate ( -45deg); One}

1 $ ("Div:last-child"). Removeclass (' Rotatel-addclass ');

One of the main stresses of this answer is that the animation that JQuery achieves is at the expense of the CPU.

In particular, when there are a large number of elements to perform animation at the same time, will bring unexpected results, compared to this, the browser natively supported CSS style becomes more excellent.

Here is a link, is foreign about the implementation of the efficiency of the test situation: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

(It is mainly mentioned that the animation effect of CSS, whether in the base of a large number of elements or in the effect of color changes, have better efficiency)

3. Plugins that can use JQuery

Without careful study, leave an address, interested students can see: https://github.com/puppybits/QTransform

Conclusion

A right menu bar appears the effect of tossing the afternoon, their level or there is a problem.

Give your website a promotion: Www.witness23.info

Construction, but also hope that we have a lot of advice. ⁄ (⁄⁄ ⁄ω⁄ ⁄⁄) ⁄

About. Animate () function and transition in CSS3