.animated {
  transition: all 200ms ease-in-out; 
}

/* Fade in, out Styles */
.fade-in, .fade-out.inactive { /* End State */
  opacity: 1;
}
.fade-in.inactive, .fade-out { /* Default State */
  opacity: 0;
}

/* Slide In Styles */
.slide-in-left {
  transform: translateX(0);
}
.slide-in-left.inactive {
  transform: translateX(-20%);
  opacity: 0;
}
.slide-in-right {
  transform: translateX(0);
}
.slide-in-right.inactive {
  transform: translateX(20%);
  opacity: 0;
}

/* Rotate Styles */
.rotate-ccw-90 {
  transform: rotateZ(0);
}
.rotate-ccw-90.inactive {
  transform: rotateZ(-90deg);
}