.router-transition-slide-forward,
.router-transition-slide-backward {
  /* Apply some styles for view element when custom transition is running */
}
.router-transition-slide-forward .page-current {
  /* Animation when current page transforms to previous page */
  animation: slide-current-to-prev var(--f7-page-cover-transition-duration)
    forwards;
}
.router-transition-slide-forward .navbar .title-large {
  animation: slide-navbar-title-large-current-to-prev
    var(--f7-page-cover-transition-duration) forwards;
}
.router-transition-slide-forward .page-next {
  /* Animation when next page transforms to current page (new page comes into view) */
  animation: slide-next-to-current var(--f7-page-cover-transition-duration)
    forwards;
}
.router-transition-slide-backward .page-current {
  /* Animation when current page transforms to next page (going back) */
  animation: slide-current-to-next var(--f7-page-cover-transition-duration)
    forwards;
}
.router-transition-slide-backward .page-previous {
  /* Animation when previous page transforms to current page (previous page comes into view) */
  animation: slide-prev-to-current var(--f7-page-cover-transition-duration)
    forwards;
}
.router-transition-slide-backward .navbar .title-large {
  animation: slide-navbar-title-large-prev-to-current
    var(--f7-page-cover-transition-duration) forwards;
}

/* Specify animations */
@keyframes slide-current-to-prev {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-20%, 0, 0);
  }
}
@keyframes slide-prev-to-current {
  from {
    transform: translate3d(-20%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}

@keyframes slide-next-to-current {
  from {
    transform: translate3d(100%, 0, 0);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  }

  to {
    transform: translate3d(0%, 0, 0);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.2);
  }
}
@keyframes slide-current-to-next {
  from {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.2);
  }
  to {
    transform: translate3d(100%, 0, 0);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  }
}

@keyframes slide-navbar-title-large-current-to-prev {
  from {
    top: 100%;
    opacity: 1;
  }
  to {
    top: 0%;
    opacity: 0;
  }
}

@keyframes slide-navbar-title-large-prev-to-current {
  from {
    top: 0%;
    opacity: 0;
  }
  to {
    top: 100%;
    opacity: 1;
  }
}