To make CSS animation smooth, you need to select the right properties, control the rhythm, and reduce rearrangement and redrawing. 1. Priority is given to using high-performance attributes such as transform and opacity to avoid frequent triggering of re-arranged width and height; 2. Reasonably set the transition time (0.2s~0.5s) and functions, such as ease-in-out or custom cubic-bezier curves; 3. Avoid layout jitter in JS, use requestAnimationFrame instead or hand it over to CSS for processing; 4. Appropriately enable hardware acceleration, such as translateZ(0), but use will-change with caution to avoid excessive memory.

CSS transitions and animations are important tools to improve the web interactive experience, but to do it "smooth" does not just add a transition: all 0.3s . The key is to understand their working mechanism and optimize them according to actual scenarios.

Use the correct properties

Not all CSS properties are suitable for animation. Some properties frequently trigger publishing or drawing operations when changing, resulting in lag. For example, width and height changes may cause reflow, while opacity and transform almost only involve synthesizer-level operations, with better performance.

Recommended priority attributes:

• opacity
• transform (such as translate, scale, rotate)
• filter (some browsers support better)

If you have to move the layout-related attributes, it is best to control the frequency and range, or consider using will-change or translateZ to tell the browser in advance that this element may move.

Control transition time and functions

The default ease function is actually good, but many times we still need to adjust the time curve according to the specific effect to make the animation look more natural.

Some common suggestions:

• Fast in and slow out: cubic-bezier(0.25, 0.1, 0.25, 1) (this is the default)
• Simple and fast: ease-in-out or cubic-bezier(0.4, 0, 0.2, 1)
• If you are more flexible, try cubic-bezier(0.68, -0.55, 0.27, 1.55)

In terms of time, it is generally recommended to be between 0.2s and 0.5s . It is too short and has no feeling, and it is too long and procrastinating. Of course, complex animation effects may require combining different durations to create a sense of rhythm.

Avoid forced synchronous layouts and frequent redrawing

A common problem is that we frequently modify styles in JS, causing the browser to constantly recalculate the layout. For example:

 element.style.left = '10px';
console.log(element.offsetTop); // Force synchronous layout!
element.style.left = '20px';

This can cause "layout thrashing" to severely slow down the page. If you want to do complex animations, it is best to use requestAnimationFrame or simply leave it to CSS to handle it.

In addition, try to avoid modifying properties that will cause redrawing in the animation, such as box-shadow or border-radius , unless you are sure that performance is OK.

Rational use of hardware acceleration

Modern browsers automatically enable GPU acceleration for certain CSS operations, such as transform and opacity . But we can also actively trigger it through some tricks:

• Add transform: translateZ(0) or will-change: transform to the element
• Especially useful for mobile devices, because GPUs perform better on mobile devices

But don't abuse will-change , it will take up extra memory and is not a universal accelerator. Use only if you know clearly that an element is about to change frequently.

Basically that's it. CSS animation is not complicated, but there are many details, so it will get stuck if you are not careful. The key is to select the right attributes, control the rhythm, reduce rearrangement and redrawing, and the rest is to debug more and see the smoothness.

The above is the detailed content of Creating smooth CSS transitions and animations. For more information, please follow other related articles on the PHP Chinese website!