.InUp{ -webkit-transition: all 1.1s ease 0s;
	transition: all 1.1s ease 0s;
	-ms-transition: all 1.1s ease 0s;
	bottom: -200px; opacity: 0; position: relative;}
.page_c .InUp{
	bottom: 0; opacity: 1;
}
.InLeft{ -webkit-transition: all 1.1s ease 0s;
	transition: all 1.1s ease 0s;
	-ms-transition: all 1.1s ease 0s;
	left: -400px; opacity: 0; position: relative;}
.page_c .InLeft{
	left: 0; opacity: 1;
}
.InRight{ -webkit-transition: all 1.1s ease 0s;
	transition: all 1.1s ease 0s;
	-ms-transition: all 1.1s ease 0s;
	right: -400px; opacity: 0; position: relative;}
.page_c .InRight{
	right: 0; opacity: 1;
}
.InDown{ -webkit-transition: all 1.3s ease 0s;
	transition: all 1.3s ease 0s;
	-ms-transition: all 1.3s ease 0s;
	top: -200px; opacity: 0; position: relative;}
.page_c .InDown{
	top: 0; opacity: 1;
}


.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: forwards;/* 属性规定动画在播放之前或之后，其动画效果是否可见。*/ animation-fill-mode: both; -webkit-transition-property:all; transition-property:all;animation-duration: 1.5s;}
.animated2 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;/* 属性规定动画在播放之前或之后，其动画效果是否可见。*/ } 
.page.active .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: forwards;/* 属性规定动画在播放之前或之后，其动画效果是否可见。*/ animation-fill-mode: both; -webkit-transition-property:all; transition-property:all }


@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1; -webkit-transform: none;transform: none;}
}

@keyframes fadeInUp {
    from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*left*/
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft{
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/*right*/
@-webkit-keyframes fadeInRight{
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInRight{
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

/*Down*/
@-webkit-keyframes fadeInDown{
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown{
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInDown{
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
/*360*/
@-webkit-keyframes fadeIXz{
    from {  
      -webkit-transform: rotatex(0deg);  -moz-transform: rotatex(180deg);transform: rotatey(180deg); 
    }

    100% {         opacity: 1;
        -webkit-transform: none;
        transform: none;

    }
}

@keyframes fadeInXz{
    from { 
      -webkit-transform: rotatex(0deg);  -moz-transform: rotatex(180deg);transform: rotatey(180deg); 
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInXz{
    -webkit-animation-name: fadeInXz;
    animation-name: fadeInXz;
}
/*flipInX*/
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}