.banner-tit1,
.banner-tit2,
.banner-tit3 {
    opacity: 0;
}

/* 向上 */
.banner-up {
    animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* 向下 */
.banner-down {
    animation: fadeDown 0.8s ease forwards;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* 向左 */
.banner-left {
    animation: fadeLeft 0.8s ease forwards;
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* 向右 */
.banner-right {
    animation: fadeRight 0.8s ease forwards;
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* 翻转 */
.banner-flip {
    animation: flip 0.8s ease forwards;
}

@keyframes flip {
    from {
        opacity: 0;
        transform: rotateY(90deg);
    }

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