From IT Skills
Jump to: navigation, search

very good support

also called as Declarative

how does Chrome turn the DOM into a screen image?[edit | edit source]

Conceptually, it:

  • 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

left top

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

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.

layer creation is triggered:

  • 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;

10 principles for smooth web animations[edit | edit source]

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

hardware accelerated CSS[edit | edit source]

gpu-animation-doing-it-right[edit | edit source]

    • 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
    • We could also animate via JavaScript, but we’d have to add transform: translateZ(0) or will-change: transform, opacity first in order to ensure that the element gets its own compositing layer.

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.