@keyframes xuanzhuan {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);

    }
}
/*飞入飞出*/
@keyframes moveFromTop{
0%{
    transform:translateY(-100%);
    }
}
@-webkit-keyframes moveFromTop{
    0%{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
}
@-moz-keyframes moveFromTop{
    0%{ transform:translateY(-100%);-moz-transform:translateY(-100%);}
}
@-ms-keyframes moveFromTop{
    0%{ transform:translateY(-100%);-ms-transform:translateY(-100%);}
}



@keyframes moveFromLeft{
    0%{ transform:translateX(-150%);}
}
@-webkit-keyframes moveFromLeft{
    0%{ transform:translateX(-150%);-webkit-transform:translateX(-150%);}
}
@-moz-keyframes moveFromLeft{
    0%{ transform:translateX(-150%);-moz-transform:translateX(-150%);}
}
@-ms-keyframes moveFromLeft{
    0%{ transform:translateX(-150%);-ms-transform:translateX(-150%);}
}


@keyframes moveFromBottomLong{
    0%{ bottom:-110%;}
    100%{ bottom:40%;}
}
@-webkit-keyframes moveFromBottomLong{
    0%{ bottom:-110%;}
    100%{ bottom:40%;}
}
@-moz-keyframes moveFromBottomLong{
    0%{ bottom:-110%;}
    100%{ bottom:40%;}
}@-ms-keyframes moveFromBottomLong{
     0%{ bottom:-110%;}
     100%{ bottom:40%;}
 }


@keyframes moveFromBottom{
    from{ transform: translateY(100%);}
}
@-webkit-keyframes moveFromBottom{
    from{ transform: translateY(100%);-webkit-transform: translateY(100%);}
}
@-moz-keyframes moveFromBottom{
    from{ transform: translateY(100%);-moz-transform: translateY(100%);}
}@-ms-keyframes moveFromBottom{
     from{ transform: translateY(100%);-ms-transform: translateY(100%);}
 }



@keyframes moveFromBottom2{
    from{ transform: translateY(150%);}
}
@-webkit-keyframes moveFromBottom2{
    from{ transform: translateY(150%);-webkit-transform: translateY(150%);}
}
@-moz-keyframes moveFromBottom2{
    from{ transform: translateY(150%);-moz-transform: translateY(150%);}
}@-ms-keyframes moveFromBottom2{
     from{ transform: translateY(150%);-ms-transform: translateY(150%);}
 }



@keyframes moveFromBottom3{
    from{ transform: translateY(520%);}
}
@-webkit-keyframes moveFromBottom3{
    from{ transform: translateY(520%);-webkit-transform: translateY(520%);}
}
@-moz-keyframes moveFromBottom3{
    from{ transform: translateY(520%);-moz-transform: translateY(520%);}
}
@-ms-keyframes moveFromBottom3{
    from{ transform: translateY(520%);-ms-transform: translateY(520%);}
}
/*放大缩小*/
@keyframes resizeBig {
    0%{
        transform: scale(2.2);opacity: 0;
    }
    100%{
        transform: scale(1.1);opacity: 1;
    }
}
@-webkit-keyframes resizeBig {
    0%{
        transform: scale(2.2);opacity: 0;
        -webkit-transform:scale(2.2);opacity: 0 ;
    }
    100%{
        transform: scale(1.1);opacity: 1;
        -webkit-transform:scale(1.1);opacity: 1 ;
    }
}
@-moz-keyframes resizeBig {
    0%{
        transform: scale(2.2);opacity: 0;
        -moz-transform:scale(2.2);opacity: 0 ;
    }
    100%{
        transform: scale(1.1);opacity: 1;
        -moz-transform:scale(1.1);opacity: 1 ;
    }
}
@-webkit-keyframes resizeBig {
    0%{
        transform: scale(2.2);opacity: 0;
        -ms-transform:scale(2.2);opacity: 0 ;
    }
    100%{
        transform: scale(1.1);opacity: 1;
        -ms-transform:scale(1.1);opacity: 1 ;
    }
}
@keyframes moveToLeft {
    to{
        transform: translateX(-120%);
    }
}
@-webkit-keyframes moveToLeft{
    to{
        transform:translateX(-120%);
        -webkit-transform:translateX(-120%);
    }
}
@-moz-keyframes moveToLeft{
    to{
        transform:translateX(-120%);
        -webkit-transform:translateX(-120%);
    }
}
@-ms-keyframes moveToLeft{
    to{
        transform:translateX(-120%);
        -webkit-transform:translateX(-120%);
    }
}
@keyframes moveToRight{
    to{
        transform:translateX(120%);
    }
}
@-webkit-keyframes moveToRight{
    to{
        transform:translateX(120%);
        -webkit-transform:translateX(120%);
    }
}
@-moz-keyframes moveToRight{
    to{
        transform:translateX(120%);
        -webkit-transform:translateX(120%);
    }
}
@-ms-keyframes moveToRight{
    to{
        transform:translateX(120%);
        -webkit-transform:translateX(120%);
    }
}
/* 页面切换*/
@keyframes moveToLeftbox {
    to{
        transform: translateX(100%);
    }
}
@-webkit-keyframes moveToLeftbox {
    to{
        transform: translateX(100%);
        -webkit-transform: translateX(100%);;
    }
}
@keyframes moveFromRightbox {
    from{
        transform: translateX(-100%);
    }
}
@-webkit-keyframes  moveFromRightbox{
    from{
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
@keyframes moveToRightbox {
      to{
          transform: translateX(-100%);
      }
}
@-webkit-keyframes moveToRightbox {
    to{
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
@keyframes moveFromLeftbox {
    from{
        transform: translateX(100%);
    }
}
@-webkit-keyframes moveFromLeftbox {
    from{
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
}
/*从下往上*/
@keyframes moveToTopbox {
    to{
        transform: translateY(-100%);
    }
}
@-webkit-keyframes moveToTopbox{
    to{
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
    }
}
@-moz-keyframes moveToTopbox{
    to{
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
    }
}
@-ms-keyframes moveToTopbox{
    to{
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
    }
}
/*从下往上*/
@keyframes moveFromBottombox{
    from{
        transform:translateY(100%);
    }
}
@-webkit-keyframes moveFromBottombox{
    from{
        transform:translateY(100%);
        -webkit-transform:translateY(100%);
    }
}
@-moz-keyframes moveFromBottombox{
    from{
        transform:translateY(100%);
        -webkit-transform:translateY(100%);
    }
}
@-ms-keyframes moveFromBottombox{
    from{
        transform:translateY(100%);
        -webkit-transform:translateY(100%);
    }
}
/*从上往下*/
@keyframes moveToBottombox{
    to{
        transform:translateY(100%);
    }
}
@-webkit-keyframes moveToBottombox{
    to{
        transform:translateY(100%);
        -webkit-transform:translateY(100%);
    }
}
@-moz-keyframes moveToBottombox{
    to{
        transform:translateY(100%);
        -webkit-transform:translateY(100%);
    }
}
@-ms-keyframes moveToBottombox{
    to{
        transform:translateY(100%);
        -webkit-transform:translateY(100%);
    }
}
/*从上往下*/
@keyframes moveFromTopbox{
    from{
        transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        -ms-transform:translateY(-100%);
    }
}
@-webkit-keyframes moveFromTopbox{
    from{
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
    }
}
@-moz-keyframes moveFromTopbox{
    from{
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
    }
}
@-ms-keyframes moveFromTopbox{
    from{
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
    }
}
/*测试 旋转缩小进入 从对角进入等动画*/
@keyframes xuanzhuanResize {
    0%{
        transform: rotate(0) scale(1.1);opacity: 0;
    }
    13%{
        transform: rotate(90deg);
    }
    25%{
        transform: rotate(180deg);
    }
    36%{
        transform: rotate(270deg);
    }
    50%{
        transform: rotate(360deg);
    }
    66%{
        transform: rotate(270deg);
    }
    75%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(0) ;
    }
}
@keyframes moveFromBevel {
    from{
        transform: translateX(-100%) translateY(-100%);
        -webkit-transform:translateX(-100%) translateY(-100%);
    }
}