A collection of neat and performance-conscious CSS

css.css

* {
  box-sizing: border-box;
  position: relative;
}


/* Smooth easings */
.enter {
  animation-timing-function:
    cubic-bezier(0, .5, .5, 1);
}

.move {
  animation-timing-function:
    cubic-bezier(.5, 0, .5, 1);
}

.exit {
  animation-timing-function:
    cubic-bezier(.5, 0, 0, 1);
}


/* Animating box shadow */
/*http://tobiasahlin.com/blog/how-to-animate-box-shadow/*/
.background:before {
  content: '';

  /* layer it */
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

  /* style it */
  box-shadow:
    0 .5rem 1rem rgba(0, 0, 0, 0.1);
  opacity: 1;
}
/* Animate with opacity between elements */



/* Sliding layers to animate width and height */
/*https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse*/
.parent {
  overflow: hidden;
  transform: translate(-50%, -50%);
  /* imagine this as just a conainer for the final position */
}

.child {
  transform: translate(50%, 50%);
}