How to solve the animation stuck problem in css

Summary of solutions to CSS3 animation stuck

1. Try to use transform for animation and avoid using height, width, margin, padding, etc.;

The reason is:
By definition, the CSS transform property does not change the layout of the element or its surrounding elements . The transform attribute will have an impact on the overall of the element. It will scale, rotate, and move the entire element.

This is good news for browsers! The browser only needs to generate the bitmap of this element once and submit it to the GPU for processing when the animation starts. After that, the browser does not need to do any layout, drawing and submitting bitmap operations. As a result, the browser can take full advantage of the GPU's capabilities to quickly draw bitmaps in different positions, perform rotation or scaling.

The reason for the slow height:
In each frame of the animation, the browser has to perform layout, drawing, and submit a new bitmap to GPU. We know that loading a bitmap into the GPU's memory is a relatively slow operation.

The reason why the browser needs to do a lot of work is that the content of the element is constantly changing in each frame. Changing the height of an element may result in the need to synchronize the size of its child elements , so the browser must recalculate the layout . After layout is completed, the main thread must regenerate the element's bitmap.

2. When the requirements are high, you can open the browser to enable GPU hardware acceleration.

For example:
1. Now, Chrome, FireFox, Safari, IE9+ and the latest version of Opera all support hardware acceleration. When they detect that a DOM element in the page has applied some CSS rules will be turned on when the most significant feature of the element is the 3D transformation.

.cube {   
    -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);}

2. But in some cases, we do not need to apply 3D transformation effects to elements, so what should we do? At this time, we can use a little trick to "cheat" the browser to turn on hardware acceleration.

Although we may not want to apply 3D transformation to elements, we can still turn on the 3D engine. For example, we can use transform: translateZ(0); to enable hardware acceleration.

.cube {   
-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
-ms-transform: translateZ(0);   
-o-transform: translateZ(0);   
transform: translateZ(0);   /* Other transform properties here */}

In Chrome and Safari, when we use CSS transforms or animations, the page may flicker. The following code can fix this situation:

.cube {   
-webkit-backface-visibility: hidden;   
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;  
backface-visibility: hidden;   
-webkit-perspective: 1000;   
-moz-perspective: 1000;   
-ms-perspective: 1000;   
perspective: 1000;   /* Other transform properties here */}

The above is the detailed content of How to solve the animation stuck problem in css. For more information, please follow other related articles on the PHP Chinese website!