@keyframes slideInFromLeft {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  .slide-in-from-left-enter-active {
    animation: slideInFromLeft 0.3s ease-in-out;
  }

  .slide-in-from-right-enter-active {
    animation: slideInFromRight 0.3s ease-in-out;
  }
  
  .slide-in-from-left-leave-active, .slide-in-from-right-leave-active {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }