/* 定义动画关键帧 */
@keyframes HqdpFadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes HqdpFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes HqdpFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes HqdpFadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes HqdpFadeInRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes HqdpBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes HqdpZoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes HqdpZoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        -ms-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        -ms-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}






/* 确保动画元素在触发前保持隐藏 */
.HqdpFadeIn:not(.animated),
.HqdpFadeInUp:not(.animated),
.HqdpFadeInDown:not(.animated),
.HqdpFadeInLeft:not(.animated),
.HqdpFadeInRight:not(.animated),
.HqdpZoomIn:not(.animated),
.HqdpZoomInDown:not(.animated),
.HqdpBounceIn:not(.animated) {
    visibility: hidden;
    opacity: 0;
}



/* 设置动画初始状态 */
.HqdpFadeIn {
    opacity: 0;
}
.HqdpFadeInUp {
    transform: translate3d(0, 30px, 0);
}
.HqdpFadeInDown {
    transform: translate3d(0, -30px, 0);
}
.HqdpFadeInLeft {
    transform: translate3d(-30px, 0, 0);
}
.HqdpFadeInRight {
    transform: translate3d(30px, 0, 0);
}
.HqdpBounceIn {
    transform: scale(0.3);
}


/* 触发动画后显示并应用动画 */

.HqdpFadeIn.animated {
    visibility: visible;
    animation: HqdpFadeIn 0.8s ease-out forwards;
}
.HqdpFadeInUp.animated {
    visibility: visible;
    animation: HqdpFadeInUp 0.8s ease-out forwards;
}

.HqdpFadeInDown.animated {
    visibility: visible;
    animation: HqdpFadeInDown 0.8s ease-out forwards;
}

.HqdpFadeInLeft.animated {
    visibility: visible;
    animation: HqdpFadeInLeft 0.8s ease-out forwards;
}

.HqdpFadeInRight.animated {
    visibility: visible;
    animation: HqdpFadeInRight 0.8s ease-out forwards;
}

.HqdpBounceIn.animated {
    visibility: visible;
    animation: HqdpBounceIn 0.8s ease-out forwards;
}

.HqdpZoomIn.animated {
    visibility: visible;
    animation: HqdpZoomIn 0.8s ease-out forwards;
}
.HqdpZoomInDown.animated {
    visibility: visible;
    animation: HqdpZoomInDown 0.8s ease-out forwards;
}