These updates can for instance be rotating, moving, and scaling of an element. The transform property instructs the GPU to make some last minute updates to the texture of an element before drawing it to the screen. To run performant animations we need to use the CSS transform or opacity properties.
These operations are very taxing on the CPU, so to keep a website fast we should avoid triggering them as much as possible. This process is called a reflow and it will be followed by a repaint. Modifying the dimensions of one element can therefore have lots of unforeseen consequences.Ĭhanging the width and/or height of an element will trigger the browser to determine which other elements (children, siblings, or parents) are impacted by the change and how those elements should be updated. Most elements in some way impact the rendering of other elements, they push siblings to another position, or when their size is changed a parent element also changes size. In this 5 minute tutorial we’ll explore using the transform property to simulate animating the width of an element.ĭon’t Animate the Width and Height Propertiesīrowsers don’t like it when they have to calculate the positions and sizes of elements on the webpage. Unfortunately at the moment it’s a sure-fire way to get your browser to scream in agony. Being able to animate the CSS width and height properties would be super useful.
0 kommentar(er)
