nntrn
12/6/2018 - 4:03 AM

[animation performance] Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. #notes #css #animati

[animation performance] Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. #notes #css #animation

animation.css
content_copyfile_download
/*
PERFORMANCE
there are certain combinations that can be animated safely:

transform: translate()
transform: scale()
transform: rotate()
opacity
*/

.example {
  transform: translate(0px, 0px);
  transform: scale(1);
  transform: rotate(0deg);
  opacity: (1);
}
notes.md
content_copyfile_download
  • Rendered
  • Source

STYLES THAT AFFECT LAYOUT

Here are the most popular CSS properties that, when changed, trigger layout:

  • width
  • height
  • padding
  • margin
  • display
  • border-width
  • border
  • top
  • position
  • font-size
  • float
  • text-align
  • overflow-y
  • font-weight
  • overflow
  • left
  • font-family
  • line-height
  • vertical-align
  • right
  • clear
  • white-space
  • bottom
  • min-height

The larger the tree of visible elements, the longer it takes to perform layout calculations, so you must take pains to avoid animating properties that trigger layout.

STYLES THAT AFFECT PAINT

There are many properties that will trigger a paint, but here are the most popular:

  • 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

If you animate any of the above properties the element(s) affected are repainted, and the layers they belong to are uploaded to the GPU.

sources: