HTML 5 transiciones de página

Quiero hacer una transición bonita, de aspecto moderno entre las páginas. Encontré este tutorial: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/HTML 5 transiciones de página

El autor usa JQuery para hacerlo funcionar, pero quiero hacerlo en HTML5 puro. ¿Hay alguna función en HTML5 para hacerlo, por ejemplo, en CSS?

ACTUALIZACIÓN

En finales de 2014, me gustaría añadir el siguiente comentario. Antes de hacerlo, pienselo dos veces, ¿no sería mejor crear una aplicación web AJAX de una sola página con transiciones CSS3 entre DIVs? La pregunta describe una situación muy especial que es extremadamente rara. En el resto, el 99% de los casos, una aplicación de una sola página es la mejor solución.

Fuente

2011-06-13 noober

Me pregunto si la propiedad de transición puede ser lo que está buscando, pero es una solución CSS3. Podrías probarlo en el elemento del cuerpo. http://www.cardeo.ca/2010/creating-a-fading-link-transition-with-css3 –

esta no es una respuesta a su pregunta, pero he comprobado cómo funciona esto y no lo recomendaría: el fundido de salida solo demora el tiempo que tarda la nueva página en comenzar a cargarse y no veo realmente nada notable sobre el efecto. –

Gracias, pero hasta donde he entendido, hay dos estados de un enlace: normal y hover, por lo que podemos establecer los estilos para ambos estados, así como los parámetros de transición, y el resto lo hace el navegador. Pero tengo un botón, cambiar window.location en onclick, y estoy sin ideas, cómo hacer 2 estados para body: loaded (normal) y loading (faded-out). – noober

index.htm:

<html> 
<head> 

<style> 
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; } 

#mainframe.normal 
{ 
    opacity: 1.0; 
} 
#mainframe.faded 
{ 
    opacity: 0.0; 
} 
#mainframe 
{ 
     /* Firefox */ 
     -moz-transition-property: opacity; 
     -moz-transition-duration: 3s; 
     /* WebKit */ 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 3s; 
     /* Standard */ 
     transition-property: opacity; 
     transition-duration: 3s; 
} 

</style> 

<script language="javascript"> 
function change() 
{ 
    document.getElementById('mainframe').className="faded"; 
    setTimeout(function() 
    { 
     document.getElementById('mainframe').src='page2.htm'; 
     document.getElementById('mainframe').className="normal"; 
    }, (2 * 1000)); 
} 
</script> 
</head> 

<body style="background-color:black;"> 
<iframe id="mainframe" class="normal" src="page1.htm"></iframe> 
</body> 

</html>

pagina1.htm

<html> 
<head> 
</head> 
<body style="background-color: pink;"> 
Hi, I'm page1 

<button onclick="parent.change();"> 
click me 
</button> 

</body> 
</html>

pagina2.htm

<html> 
<head> 
</head> 
<body style="background-color: pink;"> 
Hi, I'm page2 
</body> 
</html>

Fuente

2011-06-16 04:37:01 noober

Esto se basa en la respuesta correcta publicado por encima de lo que me ha ayudado mucho. Desafortunadamente, no funcionaba para mí en Chrome/Linux, funcionó bien en Firefox. Estaba buscando algo ligeramente diferente de todos modos, porque quería un encabezado común en todas las páginas. Así que aquí está mi solución adatped.

<html> 
<head> 

<style> 
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; } 

#mainframe.normal 
{ 
    opacity: 1.0; 
} 
#mainframe.faded 
{ 
    opacity: 0.0; 
} 
#mainframe 
{ 
     /* Firefox */ 
     -moz-transition-property: opacity; 
     -moz-transition-duration: 3s; 
     /* WebKit */ 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 3s; 
     /* Standard */ 
     transition-property: opacity; 
     transition-duration: 3s; 
} 

</style> 

<!--<script language="javascript">--> 
<script> 
function change(page) 
{ 
// document.write('Hello World'); 
    document.getElementById('mainframe').className="faded"; 
    setTimeout(function() 
    { 
     document.getElementById('mainframe').src=page+'.html'; 
     document.getElementById('mainframe').className="normal"; 
    }, (2 * 1000)); 
} 
</script> 
</head> 

<body style="background-color:black;"> 
    <header id="header"> 
     <h2 id="name"> 
      FRANCISCO</br> 
      FRANCHETTI 
     </h2> 
     <nav id="pages"> 
      <ul id="list-nav"> 
       <li class="current"><a onclick="change('home')" href="#">HOME</a></li> 
       <li><a onclick="change('research')" href="#">RESEARCH</a></li> 
       <li><a onclick="change('teaching')" href="#">TEACHING</a></li> 
       <li><a onclick="change('contact')" href="#">CONTACT</a></li> 
      </ul> 
     </nav> 
    </header> 
    <iframe id="mainframe" class="normal" src="home.html"></iframe> 
</body> 

</html>

Observaciones principales:

Las páginas no tienen que tener botones o cualquier cosa, aquí el manejador es la cabecera que es común a todas las páginas.
Los atributos href están desactivados porque no queremos navegar realmente, solo repoblar el src para el iframe.
Ahora la función change() toma un parámetro page que se utiliza para determinar qué página cargar; como se dijo antes, en lugar de pasar el destino para el a en el atributo href, que pasarlo como un argumento de función para change().

Fuente

2013-09-20 17:25:49 nixahn

HTML 5 transiciones de página

Respuesta

Cuestiones relacionadas