also called as Declarative
- Takes the DOM and splits it up into layers
- #Paints each of these layers independently into software bitmaps
- Uploads them to the GPU as textures
- #Composites the various layers together into the final screen image.
Layout[edit | edit source]
done by CPU - recalculating of the elements’ geometry
Paint[edit | edit source]
done by CPU - rendering of the image
color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size
Composite[edit | edit source]
done by GPU
opacity. Changes to opacity can be handled by the GPU if the element the only one in the #Layer
It’s a giant hack. You won’t find anything (at least for now) in the W3C‘s specifications about how compositing works, about how to explicitly put an element on a compositing layer or even about compositing itself. It’s just an optimization that the browser applies
Layer[edit | edit source]
Chrome paints the contents of a layer into a software bitmap before uploading it to the GPU as a texture. If that content doesn’t change in the future, it doesn’t need to be repainted.
We can move layers around, too, which makes them very useful for animation.
- 3D or perspective transform CSS properties like #translate
- <video> elements using accelerated video decoding
- <canvas> elements with a 3D (WebGL) context or accelerated 2D context
- Composited plugins (i.e. Flash, <iframe>)
- Elements with CSS animation for their opacity or using an animated transform
- Elements with accelerated CSS filters
- Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer)
- Element has a sibling with a lower #z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
- position: fixed; will-change;
tweening[edit | edit source]
use the CSS transition property to automatically animate an element as it changes. This technique is also known as “tweening”—as in transitioning between two different values
hide by opacity[edit | edit source]
When hiding things, I can usually just set the opacity to 0
- AVOID IMPLICIT COMPOSITING
- Try to keep animated objects as high as possible in the #z-index. Ideally, these elements should be direct children of the body element.
- You can give browser a hint that you’re going to use compositing with the will-change CSS property.
- you can effectively animate movement, scaling, rotation, opacity and affine transforms only
- REDUCE SIZE OF COMPOSITE LAYER
- USE CSS TRANSITIONS AND ANIMATIONS WHENEVER POSSIBLE
transform[edit | edit source]
translate[edit | edit source]
translateZ(0) or translate3d(0,0,0) manually force layer creation.
Often, position is animated by setting the left and top properties. The problem is that left and top both trigger #Layout operations, and that's expensive. The better solution is to use a #translate on the element, which does not trigger layout.
rotate[edit | edit source]
transform-origin: - sets a rotated element's base placement:
z-index[edit | edit source]
Пожалуй, на решение проблем с z-index я потратил больше времени, чем на любые другие. Mozilla не анимирует z-index, и его значение изменяется скачкообразно, тогда браузеры на основе Webkit умеют изменять его плавно.
This category has only the following subcategory.
- ► Css animations tools (2 P)