@charset "utf-8";
/* CSS Document */

/*从左边进来*/
.fadeInLeft {
	animation:fadeInLeft .5s ease ease  1;
-moz-animation:fadeInLeft .5s ease 1; /* Firefox */
-webkit-animation:fadeInLeft .5s ease 1; /* Safari and Chrome */
-o-animation:fadeInLeft .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}

@-webkit-keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}

/*从左边出去*/
.fadeOutLeft {
	animation:fadeInLeft .5s ease ease  1;
-moz-animation:fadeInLeft .5s ease 1; /* Firefox */
-webkit-animation:fadeInLeft .5s ease 1; /* Safari and Chrome */
-o-animation:fadeInLeft .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
@-webkit-keyframes fadeOutLeft { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}

/*================结束左边效果===================*/

/*从右边进来*/
.fadeInRight {
	animation:fadeInRight .5s ease ease  1;
-moz-animation:fadeInRight .5s ease 1; /* Firefox */
-webkit-animation:fadeInRight .5s ease 1; /* Safari and Chrome */
-o-animation:fadeInRight .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}

@-webkit-keyframes fadeInRight { 0% {

-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
100% {

-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight { 0% {

-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
100% {

-webkit-transform:none;
transform:none
}
}

/*从右边出去*/
.fadeOutRight {
	animation:fadeOutRight .5s ease ease  1;
-moz-animation:fadeOutRight .5s ease 1; /* Firefox */
-webkit-animation:fadeOutRight .5s ease 1; /* Safari and Chrome */
-o-animation:fadeOutRight .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}

@-webkit-keyframes fadeOutRight { 0% {

-webkit-transform:none;
transform:none

}
100% {

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

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

-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)

}
}

/*================结束右边效果===================*/

/*从下边进来*/
.fadeInUp {
	animation:fadeInUp .5s ease ease  1;
-moz-animation:fadeInUp .5s ease 1; /* Firefox */
-webkit-animation:fadeInUp .5s ease 1; /* Safari and Chrome */
-o-animation:fadeInUp .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}

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

/*从下边出去*/
.fadeOutDown {
	animation:fadeOutDown .5s ease ease  1;
-moz-animation:fadeOutDown .5s ease 1; /* Firefox */
-webkit-animation:fadeOutDown .5s ease 1; /* Safari and Chrome */
-o-animation:fadeOutDown .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
@-webkit-keyframes fadeOutDown { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
}
@keyframes fadeOutDown { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
}

/*透明出来*/
.fadeIn {
	animation:fadeIn .5s ease ease  1;
-moz-animation:fadeIn .5s ease 1; /* Firefox */
-webkit-animation:fadeIn .5s ease 1; /* Safari and Chrome */
-o-animation:fadeIn .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}

@-webkit-keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}

/*透明消失*/

.fadeOut {
	animation:fadeOut .5s ease ease  1;
-moz-animation:fadeOut .5s ease 1; /* Firefox */
-webkit-animation:fadeOut .5s ease 1; /* Safari and Chrome */
-o-animation:fadeOut .5s ease 1; /* Opera */ 
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
@-webkit-keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}