/* ***动画效果*** */
/* 淡入 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 从上到下滑入 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 从下到上滑入 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 从左侧进入 */
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 从右侧进入 */
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 旋转进入 */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-360deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

/* 缩放进入  */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 淡出 */
@keyframes fadeInOut {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ***动画类*** */
.fade-in {
    animation: fadeIn 1s ease;
}

.slide-up {
    animation: slideUp 1s ease;
}

.slide-down {
    animation: slideDown 1s ease;
}

.slide-left {
    animation: slideLeft 1s ease;
}

.slide-right {
    animation: slideRight 1s ease;
}

.rotate-in {
    animation: rotateIn 1s ease;
}

.zoom-in {
    animation: zoomIn 1s ease;
}

.fade-in-out {
    animation: fadeInOut 1s ease;
}