barba-transitions/example/style.css

An addon to BarbaJS which makes it really easy to use css transitions for page transitions.

body {
  margin: 0;
}

header {
  background: #efefef;
  height: 100px;
}

header h1 {
  margin: 0;
  line-height: 100px;
  text-align: center;
}

section.all-posts {
  width: 70%;
  margin: 0 auto;
}

section.post {
  width: 70%;
  margin: 0 auto;
}

section.sidebar {
  position: absolute;
  top: 100px;
  width: 200px;
  height: calc(100vh - 100px);
  background: #d6d6d6;
}

/* Transitions */

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInUp {
  0% {opacity: 0; transform: translate3d(0, 100%, 0);}
  100% {opacity: 1; transform: none;}
}

@keyframes slideInRight {
  0% {opacity: 0; transform: translate3d(-100%, 0, 0);}
  100% {opacity: 1; transform: none;}
}