/* 淡入动画 */
.fade-in {
    opacity: 0;
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
/* 滑动动画 */
.slide-in {
    transform: translateY(50px);
    opacity: 0;
    animation: slideIn 2s forwards;
}

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

/* 定义缩放动画 */
.scale-in {
    transform: scale(0.8);
    opacity: 0;
    animation: scaleIn 2s forwards;
}

@keyframes scaleIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 定义弹跳动画 */
.bounce-in {
    transform: translateY(50px);
    opacity: 0;
    animation: bounceIn 2s forwards;
}

@keyframes bounceIn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
    }
}

/* 定义旋转动画 */
.rotate-in {
    transform: rotate(-10deg) scale(0.8);
    opacity: 0;
    animation: rotateIn 2s forwards;
}

@keyframes rotateIn {
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}


/* 定义淡入并缩放动画 */
.fade-scale-in {
    transform: scale(0.8);
    opacity: 0;
    animation: fadeScaleIn 2s forwards;
}

@keyframes fadeScaleIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 定义滑动并旋转动画 */
.slide-rotate-in {
    transform: translateY(50px) rotate(-10deg);
    opacity: 0;
    animation: slideRotateIn 2s forwards;
}

@keyframes slideRotateIn {
    to {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}

/* 定义弹跳并缩放动画 */
.bounce-scale-in {
    transform: translateY(50px) scale(0.8);
    opacity: 0;
    animation: bounceScaleIn 2s forwards;
}

@keyframes bounceScaleIn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-30px) scale(0.9);
    }
    60% {
        transform: translateY(-15px) scale(0.95);
    }
    to {
        opacity: 1;
    }
}

/* 定义淡入并旋转动画 */
.fade-rotate-in {
    transform: rotate(-10deg);
    opacity: 0;
    animation: fadeRotateIn 2s forwards;
}

@keyframes fadeRotateIn {
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* 定义滑动并缩放动画 */
.slide-scale-in {
    transform: translateY(50px) scale(0.8);
    opacity: 0;
    animation: slideScaleIn 2s forwards;
}

@keyframes slideScaleIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 定义淡入并旋转动画 */
.fade-rotate-in {
    transform: rotate(-10deg);
    opacity: 0;
    animation: fadeRotateIn 2s forwards;
}

@keyframes fadeRotateIn {
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* 定义滑动并缩放动画 */
.slide-scale-in {
    transform: translateY(50px) scale(0.8);
    opacity: 0;
    animation: slideScaleIn 2s forwards;
}

@keyframes slideScaleIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 定义弹跳并旋转动画 */
.bounce-rotate-in {
    transform: translateY(50px) rotate(-10deg);
    opacity: 0;
    animation: bounceRotateIn 2s forwards;
}

@keyframes bounceRotateIn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    40% {
        transform: translateY(-30px) rotate(-15deg);
    }
    60% {
        transform: translateY(-15px) rotate(-5deg);
    }
    to {
        opacity: 1;
    }
}

/* 定义淡入并缩放并旋转动画 */
.fade-scale-rotate-in {
    transform: scale(0.8) rotate(-10deg);
    opacity: 0;
    animation: fadeScaleRotateIn 2s forwards;
}

@keyframes fadeScaleRotateIn {
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 定义滑动并弹跳动画 */
.slide-bounce-in {
    transform: translateY(50px);
    opacity: 0;
    animation: slideBounceIn 2s forwards;
}

@keyframes slideBounceIn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
    }
}

/* 定义淡入并从左滑入动画 */
.fade-slide-in-left {
    transform: translateX(-50px);
    opacity: 0;
    animation: fadeSlideInLeft 2s forwards;
}

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

/* 定义淡入并从右滑入动画 */
.fade-slide-in-right {
    transform: translateX(50px);
    opacity: 0;
    animation: fadeSlideInRight 2s forwards;
}

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

/* 定义淡入并从上滑入动画 */
.fade-slide-in-top {
    transform: translateY(-50px);
    opacity: 0;
    animation: fadeSlideInTop 2s forwards;
}

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


/* 定义淡入并从下滑入动画 */
.fade-slide-in-bottom {
    transform: translateY(50px);
    opacity: 0;
    animation: fadeSlideInBottom 2s forwards;
}

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

/* 定义淡入并从左旋转动画 */
.fade-rotate-in-left {
    transform: translateX(-50px) rotate(-10deg);
    opacity: 0;
    animation: fadeRotateInLeft 2s forwards;
}

@keyframes fadeRotateInLeft {
    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* 定义淡入并从右旋转动画 */
.fade-rotate-in-right {
    transform: translateX(50px) rotate(10deg);
    opacity: 0;
    animation: fadeRotateInRight 2s forwards;
}

@keyframes fadeRotateInRight {
    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* 定义淡入并从左弹跳动画 */
.fade-bounce-in-left {
    transform: translateX(-50px);
    opacity: 0;
    animation: fadeBounceInLeft 2s forwards;
}

@keyframes fadeBounceInLeft {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(-30px);
    }
    60% {
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
    }
}


/* 定义淡入并从上弹跳动画 */
.fade-bounce-in-top {
    transform: translateY(-50px);
    opacity: 0;
    animation: fadeBounceInTop 2s forwards;
}

@keyframes fadeBounceInTop {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
    }
}

/* 定义淡入并从下弹跳动画 */
.fade-bounce-in-bottom {
    transform: translateY(50px);
    opacity: 0;
    animation: fadeBounceInBottom 2s forwards;
}

@keyframes fadeBounceInBottom {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(30px);
    }
    60% {
        transform: translateY(15px);
    }
    to {
        opacity: 1;
    }
}

/* 定义淡入并从左缩放动画 */
.fade-scale-in-left {
    transform: translateX(-50px) scale(0.8);
    opacity: 0;
    animation: fadeScaleInLeft 2s forwards;
}

@keyframes fadeScaleInLeft {
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}


/* 定义淡入并从右缩放动画 */
.fade-scale-in-right {
    transform: translateX(50px) scale(0.8);
    opacity: 0;
    animation: fadeScaleInRight 2s forwards;
}

@keyframes fadeScaleInRight {
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}