What are the advantages and disadvantages of transform animation and directly using left and top to change position?

what are the advantages and disadvantages of using animation and positioning displacement?

Jun.14,2022

Animation modifying the left and top of an element will change its shape and may cause other elements on the page to move and change shape, a process called layout. CSS-based animation and natively supported Web animation are usually handled on a thread called a synthesizer thread, where both transforms and opacity can be processed; unlike the browser's main thread, it executes styles, layout, drawing, and JavaScript in that main thread. This means that if the browser runs some time-consuming task on the main thread, the animation can continue to run without interruption; if any animation starts drawing, layout, or both, the main thread will do the job. This is the same for CSS-based or JavaScript-based animation, layout or drawing costs are huge, making it meaningless for the associated CSS or JavaScript to perform work or render; avoid using attribute animation that triggers layout or drawing. For most modern browsers, this means limiting animation (modified properties) to opacity and transform
so: when you modify left and top, transform:translate (x, y) and left:xpx;top:ypx are different in performance, and there may be differences in effect https://codeshelper.com/a/11...


transform has higher performance, and
left,top has better compatibility

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1beb0a1-31a4b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1beb0a1-31a4b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?