@charset "utf-8";

/* 动画库主文件 */
/* 本文件定义了一系列CSS3动画效果，适用于Web元素渐显、缩放等交互场景。 */

/* 动画类定义部分：每个类对应一个特定的动画效果 */
.anim-fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.anim-fadeInBig {
    -webkit-animation-name: fadeInBig;
    animation-name: fadeInBig;
}

.anim-fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.anim-fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.anim-pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

.anim-zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

.anim-zoomInDownSmall {
    -webkit-animation-name: zoomInDownSmall;
    animation-name: zoomInDownSmall;
}

/* 通用动画基础类：设置动画时长和填充模式 */
.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: none;
}

/* 渐显动画：从完全透明到不透明 */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 放大到缩小动画：从缩放为0开始，先放大到1.1倍，最后恢复正常大小 */
@-webkit-keyframes fadeInBig {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fadeInBig {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* 顶部向下渐显动画：元素从上方50px处向下移动并渐显 */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* 底部向上渐显动画：元素从下方50px处向上移动并渐显 */
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* 脉冲动画：元素轻微缩放，产生脉冲效果 */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scaleX(1);
    }
}

@keyframes pulse {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        transform: scaleX(1);
    }
}

/* 顶部向下放大渐显动画：从缩放0.5倍且上方150px处开始，向下移动并放大 */
@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

/* 小幅度顶部向下放大渐显动画：类似zoomInDown，但移动距离更小 */
@-webkit-keyframes zoomInDownSmall {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -50px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 10px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInDownSmall {
    0% {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -50px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate3d(0, 10px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}