Front-end performance optimization: Use CSS animation whenever possible

Source: Internet
Author: User

Date: 2013-7-4 Source:

Website design requires a large number of beautiful features and configurable element animations, making some JavaScript libraries such as jquery and mootools widely used. Although the browser currently supports CSSTransformationAndKeyframeMany people still use JavaScript to create animations, but CSS animations are more efficient than JavaScript-driven animations. CSS animation requires less code. Many CSS animations are processed with GPUs, so the animation itself is smooth. Of course, you can use the following simple CSS to force your hardware to accelerate:

. Myanimation {Animation: someanimation 1 s; transform: translate3d (0, 0, 0);/* force hardware acceleration */}

Tansform: Transform (0, 0)Send calls to hardware acceleration without affecting other animations. When CSS animation is not supported (IE8 and earlier browsers), you can introduce JavaScript animation logic:

<! -- [If earlier than IE8 version]> <SCRIPT src = ""> </SCRIPT> <SCRIPT src = "/JS/ie-animations.js"> </SCRIPT> <! [Endif] -->

In the above example, the ie-animations.js file must contain your custom jquery code, used to replace CSS animation to complete the animation effect when CSS animation is not supported in early IE. It perfectly optimizes the animation through CSS animation and supports global animation effects through JavaScript.

In the next article, we will introduce event delegation. For more information about CSS animation, see the CSS 3 Series tutorials in the excellent tutorials.

Related reading:

  • Front-end performance optimization: documentfragments or innerhtml replaces Complex Element Injection
  • Front-end performance optimization: Anti-shake of high-frequency execution events/methods
  • Frontend performance optimization: static cache and non-essential content Optimization for Network Storage
  • Frontend performance optimization: asynchronous loading and delayed loading of Dependencies
  • Front-end performance optimization: Use array. Prototype. Join to replace string connections

Via geeks

Source: front-end performance optimization: Use CSS animation whenever possible
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.