[SOLUCIONADO] animación izquierda derecha y opacidad de div. css

[lexus]

Hola
estoy creando una aplicacion en phonegap
totalmente con html y javascript
me gustaria para darle un efecto fluido y con las animaciones que manejan android y ios para entrada y salida de ventanas

como podria hacer para que cuando este en un pagina esta ingrese de derecha a izquierda con una transparencia gradual.
y cuando este en la pagina siguiente y oprima el boton de atras,

la pagina cargue de izquierda a derecha con la difuminacion gradual.

podría ser que los div sean los que tengan esta animacion o la pagina html completa
no sabría como hacerlo ya que no manejo muy bien el html

alguien me puede orientar.

[pzin]

Usa transformaciones 3D, aunque solo animes 2D. Es más fluido.

Tendrías que animar algún elemento. Tal vez exista por ahí alguna librería ya hecha que cubra esa necesidad.

[g3kdigital]

Existe esta libreria de animaciones https://daneden.github.io/animate.css/

Pero realmente es muy facil

Código CSS:

@keyframes aparece-izquierda
{
    from { 
         transform: translateX(-100%); 
         opacity: 0;
            }
    to { 
         transform: translateX(0%); 
         opacity: 1;
            }
}
 
.paginauelemento
{
     animation: aparece-izquierda ease 1s backwards; 
}
 

[lexus]

excelente es tal cual lo que buscaba,

ahora sabes como ponerle un poco mas de velocidad?

[g3kdigital]

Con velocidad espero te refieras a la entrada aun más rapida de los elementos, esto se logra modificando el tiempo de la animación, es decir envés de 1s (1 segundo) usa .3s (30 milisegundos) o variaciones.

Ahora sí te refieres a la velocidad de performance o de rendimiento, es un tema más complejo que no es pertinente a css.