Animations running at 60fps look smooth. Animations running slower are janky.
1000 ms / 60 fps = 16.667 ms/frame
The math is pretty simple. If the browser takes longer than 16.667ms to calculate and render an animation frame, then it appears that a frame was skipped. The animation won’t look smooth if too many frames are skipped.
Jank is avoidable if animations are optimized.
Compositing, layout reflows, and repaints
Styles that can animate via compositing
Composite layers are promoted from the CPU to GPU, which isolates rendering from the main thread and enables smooth 60fps rendering.
Warning: promoting too many layers to the GPU can cause jank.
Styles that affect layout (reflows)
Reflows should be avoided whenever possible (especially during an animation) because major areas of the page are recalculated during each frame.
display overflow overflow-y position top right bottom left float clear width height min-height margin padding border border-width font-family font-size font-weight line-height text-align vertical-align white-space
Styles that affect paint (repaints)
visibility border-style background background-image background-position background-repeat background-size box-shadow outline outline-color outline-style outline-width color text-decoration
- CSS Triggers
List of CSS properties and if they trigger paint, reflow, or composite in different browsers.
Tools and info about how browsers paint, reflow, and composite content during rendering and animations.
- Paul Irish — Why moving elements with translate is better than position or absolute
- HTML5 Rocks — High performance animations
2013–11–07, CSS properties that affect layout, paint, or compositing.