Flip-in CSS transform

flip-in.css

.activities-header, .chart-header, .activities-list, .activities-chart, .map-container {
  opacity: 0.01;
  perspective: 400px;
  perspective-origin: 50% 50%;
  transform-origin: 0% 100%;
  transform: rotateX(-80deg);
}

.activities-header, .chart-header {
  transition: all 200ms ease, opacity 100ms ease;
}

/* The transition-delay here makes the header and content look like a Jacob's ladder */
.activities-chart, .activities-list {
  transition: all 500ms ease 100ms, opacity 250ms ease 250ms;
}

/* Apply this class when showing content */
.flip-in {
  opacity: 1;
  transform-origin: 0% 0%;
  transform: translateZ(0px);
}