I have a question about how to speed up the CSS 3 transition property.
Suppose I have a lot of elements:
It is very efficient to target all the changes for everyone elements using a declaration div, span, a {transition: all} . But my question is: Does the specific transition of each element be "sharp" in terms of the smoothness and sharpness of rendering animation to target the property? For example:
div {margin: 2px; Infection: margins.2s low-in} period {opacity: .5; Transition: ambiguity.2s ease-in} {background-position: left top; Transition: background .2s easily-in} div: hover {margin: -100px} duration: hover {opacity: 1} a: hover {background-position: -5px top} The argument in asking me this is that if the "all" transit properties should be discovered in the CSS "engine", even if there is only one single asset for an element, then it will slow things down.
Do anyone know if that is such a thing? Thanks!
Yes, using transition: all the reason for big weakness in performance Can be made . There may be a lot of browser in it, where it needs to be transitioned, even if users can not see it, such as color change, dimension change etc.
The easiest example I can do is to think about this: - Try changing the size of the zoom level or the font and you will see that everything gets animated. If there are not many user interactions in it There may be some interface changes, which can be reflow and repaints in some blocks, which can tell the browser to try and animate those changes.
So, in general, it is recommended that you use transition: all and instead make changes directly.
There are some other things that may go wrong with all changes, such as the animation splash on page loads, where it first introduces the initial styles for the blocks and then Apply style with animation. In many cases it will not be what you want :)
Comments
Post a Comment