/* 渐出动画 */
/* 上方渐出 */
.OutTop {
    animation: OutTop 1s ease 0.3s 1 forwards;
    opacity: 0;
}

@keyframes OutTop {
    0% {
        opacity: 0;
        transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -webkit-transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

/* 下方渐出 */
.OutBottom {
    opacity: 0;
    animation: OutBottom 1s ease 0.3s 1 forwards;
}

@keyframes OutBottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

/* 左侧渐出 */
.OutLeft {
    animation: OutLeft 1s ease 0.3s 1 forwards;
    opacity: 0;
}

@keyframes OutLeft {
    0% {
        opacity: 0;
        transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -webkit-transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
}


@keyframes OutRight {
    0% {
        opacity: 0;
        transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
}