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.

Position	transform: translate(0px, 0px)
Scale	transform: scale(0.5)
Rotation	transform: rotate(90deg)
Opacity	opacity: 0.5

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

Resources

• CSS Triggers
  List of CSS properties and if they trigger paint, reflow, or composite in different browsers.
• JankFree.org
  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
  2012–12–20
• HTML5 Rocks — High performance animations
  2013–11–07, CSS properties that affect layout, paint, or compositing.