@view-transition {
  navigation: auto;
}

/* ::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 2s;
  animation-timing-function: ease-in-out ;
} */

 
 
/* FADE
SUAVIZA A ENTRADA E A SAÍDA COM OPACIDADE. */
/* ::view-transition-old(root) {
  animation: fadeOut 0.8s ease forwards;
}
::view-transition-new(root) {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
} */


 
/* SLIDE
MOVE O CONTEÚDO HORIZONTAL OU VERTICALMENTE. */
 
/*  ::view-transition-old(root) {
  animation: slideOutLeft 0.8s ease forwards;
}
::view-transition-new(root) {
  animation: slideInRight 0.8s ease forwards;
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
 */
 
 
/*  ESCALA
AMPLIA OU REDUZ O CONTEÚDO. */

/*  ::view-transition-old(root) {
  animation: scaleDown 0.6s ease forwards;
}
::view-transition-new(root) {
  animation: scaleUp 0.6s ease forwards;
}

@keyframes scaleDown {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.8); opacity: 0; }
}
@keyframes scaleUp {
  from { transform: scale(1.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
} */

 
 
/* ROTAÇÃO
GIRA O CONTEÚDO DURANTE A TRANSIÇÃO. */

::view-transition-old(root) {
  animation: rotateOut 0.7s linear forwards;
}
::view-transition-new(root) {
  animation: rotateIn 0.7s linear forwards;
}

@keyframes rotateOut {
	from { transform: rotate(90deg); opacity: 1; }
	to   { transform: rotate(0deg); opacity: 0; }

}
@keyframes rotateIn {
	from { transform: rotate(0deg); opacity: 0; }
	to   { transform: rotate(-90deg); opacity: 1; }
}