css3實現web app翻頁過度效果

最近在開發web app頁面，要實現滑動翻頁，一開始實現的效果是無任何過渡效果的，可是這樣子的話頁面會閃跳一下，用戶體驗非常不好。於是我們主管叫我用jquery mobile,可是用了這個庫之後，問題來了，跳轉到的目標頁面，無法加載目標頁面引入的外部css文件，最後用css3完美地解決了這個問題；

.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%); }
            }

給整個頁面添加一個div,在添加.pt-page-moveToLeft這個類，就可以實現了。