使用CSS制作一个比较炫酷的页面切换动画

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

CSS Code复制内容到剪贴板

/* scale and fade */  
    
.pt-page-scaleDown {   
    animation: scaleDown .7s ease both;   
}   
    
.pt-page-scaleUp {   
    animation: scaleUp .7s ease both;   
}   
    
.pt-page-scaleUpDown {   
    animation: scaleUpDown .5s ease both;   
}   
    
.pt-page-scaleDownUp {   
    animation: scaleDownUp .5s ease both;   
}   
    
.pt-page-scaleDownCenter {   
    animation: scaleDownCenter .4s ease-in both;   
}   
    
.pt-page-scaleUpCenter {   
    animation: scaleUpCenter .4s ease-out both;   
}   
    
/************ keyframes ************/  
    
/* scale and fade */  
    
@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); }   
}  

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