CSS 动画根据它们的实现的效果分为不同的组。为展示页面过渡效果，我们使用以下结构：

 

　　CSS Code复制内容到剪贴板

 

　　透视容器的位置是相对的，我们增加1200像素透视它。所有动画效果都需要以下的样式：

 

　　CSS Code复制内容到剪贴板

 

　　.pt-perspective?{

 

　　position:relative;

 

　　width:?100%;

 

　　height:?100%;

 

　　perspective:1200px;

 

　　transform-style:?preserve-3d;

 

　　}

 

　　.pt-page{

 

　　width:?100%;

 

　　height:?100%;

 

　　position:absolute;

 

　　top:?0;

 

　　left:?0;

 

　　visibility:hidden;

 

　　overflow:hidden;

 

　　backface-visibility:hidden;

 

　　transform:?translate3d(0,?0,?0);

 

　　}

 

　　.pt-page-current,

 

　　.no-js?.pt-page{

 

　　visibility:visible;

 

　　}

 

　　.no-js?body?{

 

　　overflow:auto;

 

　　}

 

　　.pt-page-ontop?{

 

　　z-index:?999;

 

　　}

 

　　上面的 .pt-page-ontop 样式用于某些页面过渡效果，即我们需要让一个页面留在另一个页面的顶部。下面是一个代码例子，展示了动画类和关键帧动画，在不同方向上缩放网页和以及淡入淡出效果：

 

　　CSS Code复制内容到剪贴板

 

　　.pt-page-scaleDown?{

 

　　animation:?scaleDown?.7s?easeboth;

 

　　}

 

　　.pt-page-scaleUp?{

 

　　animation:?scaleUp?.7s?easeboth;

 

　　}

 

　　.pt-page-scaleUpDown?{

 

　　animation:?scaleUpDown?.5s?easeboth;

 

　　}

 

　　.pt-page-scaleDownUp?{

 

　　animation:?scaleDownUp?.5s?easeboth;

 

　　}

 

　　.pt-page-scaleDownCenter?{

 

　　animation:?scaleDownCenter?.4s?ease-inboth;

 

　　}

 

　　.pt-page-scaleUpCenter?{

 

　　animation:?scaleUpCenter?.4s?ease-outboth;

 

　　}

 

　　@keyframes?scaleDown?{

 

　　to?{?opacity:?0;?transform:?scale(.8);?}

 

　　}

 

　　@keyframes?scaleUp?{

 

　　from?{?opacity:?0;?transform:?scale(.8);?}

 

　　}

 

　　@keyframes?scaleUpDown?{

 

　　from?{?opacity:?0;?transform:?scale(1.2);?}

 

　　}

 

　　@keyframes?scaleDownUp?{

 

　　to?{?opacity:?0;?transform:?scale(1.2);?}

 

　　}

 

　　@keyframes?scaleDownCenter?{

 

　　to?{?opacity:?0;?transform:?scale(.7);?}

 

　　}

 

　　@keyframes?scaleUpCenter?{

 

　　from?{?opacity:?0;?transform:?scale(.7);?}

 

　　}

 

　　对于本演示的目的，我们采用了相应的动画类应用到当前页以及即将切换进来的页面，例如：

 

　　CSS Code复制内容到剪贴板

 

　　//...

 

　　case17:

 

　　outClass?='pt-page-scaleDown';

 

　　inClass?='pt-page-moveFromRight?pt-page-ontop';

 

　　break;

 

　　case18:

 

　　outClass?='pt-page-scaleDown';

 

　　inClass?='pt-page-moveFromLeft?pt-page-ontop';

 

　　break;

 

　　case19:

 

　　outClass?='pt-page-scaleDown';

 

　　inClass?='pt-page-moveFromBottom?pt-page-ontop';

 

　　break;

 

　　//?...

 

　　查看演示，您可以通过点击第一个按钮来浏览一整套的页面切换效果，您也可以选择从下拉菜单中选择一个特定的效果进行预览。