leptos/examples/router/style.css

.routing-progress {
	width: 100%;
	height: 20px;
}

a[aria-current] {
    font-weight: bold;
}

.outlet {
  border: 1px dotted grey;
}

.contact, .contact-list {
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 1rem;
}

.contact {
	view-transition-name: contact;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.router-outlet-0 main {
  view-transition-name: main;
}

.router-back main {
  view-transition-name: main-back;
}

.router-outlet-1 .contact-list {
  view-transition-name: contact;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(contact) {
	  animation: 0.5s fadeOut;
	}

	::view-transition-new(contact) {
	  animation: 0.5s fadeIn;
	}

	::view-transition-old(main) {
	  animation: 0.5s slideOut;
	}

	::view-transition-new(main) {
	  animation: 0.5s slideIn;
	}

	::view-transition-old(main-back) {
		color: red;
		animation: 0.5s slideOutBack;
	}

	::view-transition-new(main-back) {
		color: blue;
		animation: 0.5s slideInBack;
	}
}

@keyframes slideIn {
  from {
    transform: translate(100vw, 0);
  }
  to {
    transform: translate(0px, 0px);
  }
}

@keyframes slideOut {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(-100vw, 0);
  }
}

@keyframes slideInBack {
  from {
    transform: translate(-100vw, 0);
  }

  to {
    transform: translate(0px, 0px);
  }
}

@keyframes slideOutBack {
  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(100vw, 0);
  }
}