/* --------------

	   ui_animation.css:CSS3动画效果，对于支持CSS3的浏览器有高级效果
	   author: xiangxu@wisedu.com

 ------------ */
.animated{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: .2s;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: .2s;
    -moz-animation-delay: .2s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: .2s;
    -ms-animation-delay: .2s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    animation-duration: .2s;
    animation-delay: .2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: translateX(0);
    }
    10% {
        -webkit-transform: translateX(-10px);
    }
    20% {
        -webkit-transform: translateX(10px);
    }
    30% {
        -webkit-transform: translateX(-10px);
    }
    40% {
        -webkit-transform: translateX(10px);
    }
    50% {
        -webkit-transform: translateX(-10px);
    }
    60% {
        -webkit-transform: translateX(10px);
    }
    70% {
        -webkit-transform: translateX(-10px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    90% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-moz-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-moz-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-moz-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }
}
@-moz-keyframes shake {
    0% {
        -moz-transform: translateX(0);
    }
    10% {
        -moz-transform: translateX(-10px);
    }
    20% {
        -moz-transform: translateX(10px);
    }
    30% {
        -moz-transform: translateX(-10px);
    }
    40% {
        -moz-transform: translateX(10px);
    }
    50% {
        -moz-transform: translateX(-10px);
    }
    60% {
        -moz-transform: translateX(10px);
    }
    70% {
        -moz-transform: translateX(-10px);
    }
    80% {
        -moz-transform: translateX(10px);
    }
    90% {
        -moz-transform: translateX(-10px);
    }
    100% {
        -moz-transform: translateX(0);
    }
}


@-ms-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@-ms-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}
@-ms-keyframes fadeInUp{0%{opacity:0;-ms-transform:translateY(20px);}100%{opacity:1;-ms-transform:translateY(0);}}
@-ms-keyframes fadeOutUp{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(-20px);}}
@-ms-keyframes fadeInDown{0%{opacity:0;-ms-transform:translateY(-20px);}100%{opacity:1;-ms-transform:translateY(0);}}
@-ms-keyframes fadeOutDown{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(20px);}}
@-ms-keyframes fadeInRight{0%{opacity:0;-ms-transform:translateX(20px);}100%{opacity:1;-ms-transform:translateX(0);}}
@-ms-keyframes fadeOutLeft{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(-20px);}}
@-ms-keyframes fadeInLeft{0%{opacity:0;-ms-transform:translateX(-20px);}100%{opacity:1;-ms-transform:translateX(0);}}
@-ms-keyframes fadeOutRight{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(20px);}}
@-ms-keyframes shake{0%{-ms-transform:translateX(0);}10%{-ms-transform:translateX(-10px);}20%{-ms-transform:translateX(10px);}30%{-ms-transform:translateX(-10px);}40%{-ms-transform:translateX(10px);}50%{-ms-transform:translateX(-10px);}60%{-ms-transform:translateX(10px);}70%{-ms-transform:translateX(-10px);}80%{-ms-transform:translateX(10px);}90%{-ms-transform:translateX(-10px);}100%{-ms-transform:translateX(0);}}



@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-10px);
    }
    20% {
        transform: translateX(10px);
    }
    30% {
        transform: translateX(-10px);
    }
    40% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(-10px);
    }
    60% {
        transform: translateX(10px);
    }
    70% {
        transform: translateX(-10px);
    }
    80% {
        transform: translateX(10px);
    }
    90% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0);
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;
}

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

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -ms-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

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

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -ms-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -ms-animation-name: fadeOut;
    animation-name: fadeOut;
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -ms-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    -moz-animation-name: fadeOutDown;
    -ms-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    -moz-animation-name: fadeOutLeft;
    -ms-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    -moz-animation-name: fadeOutRight;
    -ms-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}
.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    animation-name: shake;
}