@view-transition {
    navigation: auto;
   }
   
   #headline {
    view-transition-name: encabezado;
   }
   
   main {
    view-transition-name: contenido;
   }
   
   ::view-transition-group(encabezado) {
    animation-duration: var(--md-sys-motion-duration-1000);
   }
   
   ::view-transition-group(contenido) {
    animation-duration: var(--md-sys-motion-duration-1000);
   }
   
   html::view-transition-old(encabezado) {
    animation-name: salePorLaIzquierda;
   }
   
   html::view-transition-new(encabezado) {
    animation-name: entraPorLaDerecha;
   }
   
   html::view-transition-old(contenido) {
    animation-name: salePorLaIzquierda;
   }
   
   html::view-transition-new(contenido) {
    animation-duration: var(--md-sys-motion-duration-700);
    animation-name: entraPorLaDerecha;
   }