JQuery Animation implementation CSS3 Animation example

The working principle of jQuery Animation is to change the CSS style of an element from one state to another. The CSS attribute value is gradually changed, so that you can create an animation effect. Only numeric values can be used to create animations (such as "margin: 30px "). The string value cannot be used to create an animation (for example, "background-color: red "). For detailed usage, see the jQuery effect-animate () method and official tutorials.

Many effects such as CSS3 are not numerical, so there is no way to directly implement them through the animate () method. Such as translate (), rotate (), scale (), skew (), matrix (), rotateX (), rotateY (), etc, one feature of these methods is that their values are mixed with characters and numbers. Therefore, we cannot directly use the animate () method to dynamically modify their values to achieve the animation effect.

If we use JavaScript to Implement CSS 3 animation, we can only implement it through setInterval (), which is complicated to implement. In fact, the animate () method is based on the setInterval () method, but it can be used to easily set the animation speed, and can also be set to a constant speed or a variable speed. The second use of the animate () method has a step parameter that specifies the function to be executed in each step of the animation. We can use a CSS value that does not affect the element effect significantly to trigger the animate () method, and then modify the value we want to modify in the step callback function, in this way, animation can be indirectly implemented. See the transform example:
Copy codeThe Code is as follows:
<Div id = "box"> </div>
# Box {
Width: 100px;
Height: 100px;
Position: absolute;
Top: 100px;
Left: 100px;
Text-indent: 90px;
Background-color: red;
}

$ ('# Box'). animate ({textIndent: 0 },{
Step: function (now, fx ){
('-Webkit-transform', 'rotate ('+ now + 'deg )');
},
Duration: 'low'
}, 'Linear ');

The text-indent attribute is used to trigger the animation because there is no text, so text-indent is used without affecting the style effect of the element. font-size can also be used here. Then use the animation () method to produce the rhythm for animation. And so on, we can achieve a lot of results. For more information, see

References
• JQuery effect-animate () method
•. Animate ()