CSS Animations @ 60fps

Position Transform

^*Change above and record timeline to see below results

Using CSS Positions:

Changing position alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

Source: CSS Triggers

Position styles:

/* menu element style */
.menu {
width: 280px;
position: fixed;
left: -101%; /* To hide menu initially */
bottom: 0;
top: 0;
background: #fff;
z-index: 2; /* To make menu come on top of overlay */
transition: all 200ms ease-in;
}

.menu.show {
left: 0;
}

Resulted timeframe:

Using CSS Transform:

Changing transform does not trigger any geometry changes or painting, which is very good. This means that the operation can likely be carried out by the compositor thread with the help of the GPU.

Source: CSS Triggers

Transform styles:

/* menu element style */
.menu {
  width: 280px;
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  background: #fff;
  z-index: 2; /* To make menu come on top of overlay */
  transition: all 200ms ease-in;
  transform: translateX(-101%); /* To hide menu inititally */
  will-change: transform; /* Hint browsers about the kind of changes to be expected on this element */
}

.menu.show {
  transform: translateX(0);
}

Resulted timeframe:

Reference: DevTools Timeline