Slidenav - CSS for right navigation

gistfile1.css

/* For right side navigation */

.slide ,
.nav-list {
  -webkit-animation-duration: .200s;
  -webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855);
}

.slide {
  background: #f1f1f1;
  z-index: 1;
}

/* Main view */

.slide.out {
  -webkit-animation-name: slideout;
  -webkit-transform: translateX(-250px);
}

.slide.in {
  -webkit-animation-name: slidein;
  -webkit-transform: translateX(0px);
}

@-webkit-keyframes slideout {
  from {
    -webkit-transform: translateX(0px);
  }

  to {
    -webkit-transform: translateX(-250px);
  };
}

@-webkit-keyframes slidein {
  from {
    -webkit-transform: translateX(-250px);
  }

  to {
    -webkit-transform: translateX(0px);
  };
}

/* Main view ENDS */

/* Nav menu view */

.nav-list {
  position: absolute !important;
  height: 100%;
  right: 0;
  -webkit-box-shadow: inset 15px 0px 30px -15px rgba(0,0,0,1);
  background: #222;
}

.nav-list .x-list-item {
  color: rgb(223, 223, 223);
  border-bottom: 1px solid #000 !important;
  border-top: 1px solid #333 !important;
  font-size: 15px;
}

/* Nav menu view ENDS */

/* For right side navigation ENDS */