CSS3 implement web App page over effect

Recently in the development of web App page, to realize the sliding page, the first implementation of the effect is no transition effect, but this way the page will flash jump, the user experience is very bad. So our supervisor called me to use jquery mobile, but after using this library, the problem came, jump to the target page, unable to load the target page introduced by the external CSS file, finally with CSS3 to solve the problem perfectly;

. pt-page-movetoleft {                -webkit-animation:movetoleft. 6s ease both;                -moz-animation:movetoleft. 6s ease both;                Animation:movetoleft. 6s ease both;            }            @-webkit-keyframes Movetoleft {                From{-webkit-transform:translatex ( -100%);}                to {-webkit-transform:translatex (0%);}            }            @-moz-keyframes Movetoleft {                From{-moz-transform:translatex ( -100%);}                to {-moz-transform:translatex (0%);}            }            @-o-keyframs movetoleft{                From{-o-transform:translatex ( -100%);}                To (-o-transform:translatex (0%);}            }            @keyframes Movetoleft {                Form{transform:translatex ( -100%);}                to {Transform:translatex (0%);}            }

To add a div to the entire page, add the. Pt-page-movetoleft to this class and you can do it.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS3 implement web App page over effect