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

css3实现web app翻页过度效果

标签：

原文地址：http://blog.csdn.net/u011011025/article/details/46684073