/* 动画效果 */
/* 渐变 */
@keyframes inJB {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 左上 */
@keyframes flyInTL {
    from {
        transform: translate3d(-10%, -10%, 0px);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* 右下 */
@keyframes flyInBR {
    from {
        transform: translate3d(10%, 10%, 0px);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

}

/* 上 */
@keyframes flyInTop {
    from {
        opacity: 0;
        transform: translateY(-10%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 下 */
@keyframes flyInBot {
    from {
        opacity: 0;
        transform: translateY(10%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左 */
@keyframes flyInLeft {
    from {
        opacity: 0;
        transform: translateX(-10%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右 */
@keyframes flyInRight {
    from {
        opacity: 0;
        transform: translateX(10%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}