Swipe Animation en CSS3

Actualmente estoy trabajando en un marco de aplicación mobile escrito en HTML 5, CSS3 y jQuery. Para el marcado de las 'pantallas', tengo el siguiente layout:

<div class="page" id="home"> <!-- some content is here... --> </div> <div class="page" id="lists"> <!-- some more content is here... --> </div> 

Actualmente estoy usando jQuery para detectar el primer elemento div en la página y establecer su atributo de class como current . Entonces tengo la siguiente statement de CSS que oculta cualquier cosa que no sea page.current :

 div.page { display: none; } div.page.current { display: block; } 

Cada vez que el browser detecta un evento de cambio de hash ( window.onhashchange ), ejecuto la siguiente jQuery:

 if(window.location.hash) { var the_hash = window.location.hash.substring(1); if($('#' + the_hash).length > 0) { $('.current').removeClass('current'); $('#' + the_hash).addClass('current'); } } else { $('div').eq(0).addClass('current'); } 

Lo cual funciona muy bien al mostrar el elemento de anclaje al que se hizo clic. Sin embargo, ahora quisiera crear una transición CSS (algo simple como una transición de diapositivas). Sé que podría lograr esto usando jQuery y animate() , pero preferiría ir con una animation completamente CSS3 (algo así como transformaciones de transición), porque iOS proporciona aceleración de hardware para estas animaciones.

¿Podría alguien señalarme en la dirección correcta de cómo, con este marcado podría agregar una animation para borrar el div actual de derecha a izquierda, mientras que al mismo time mostrar el nuevo?

La forma más simple es probablemente agregar otra class a cada página fuera de pantalla, como .left y .right , que coloca la página justo al lado de la pantalla hacia ese lado, tal vez utilizando la left: propiedad CSS.

Para llevar la página a la pantalla, eliminaría la class .left y la cambiaría a .current .

Para animar la transición, necesitará una regla CSS en la class .page como:

 -webkit-transition: left 1s linear;