/* 动画初始化 */
.anim-fade-in,
.anim-slide-left,
.anim-slide-right,
.anim-slide-down,
.anim-slide-up {
    opacity: 0;
    transition-timing-function: ease-in-out;
    transition-property: opacity, transform;
}

/* 淡入动画 */
.anim-fade-in {
    opacity: 0;
    transform: none;
}
.anim-fade-in.animate-active {
    opacity: 1;
}

/* 从左进场 */
.anim-slide-left {
    opacity: 0;
    transform: translateX(-50px);
}
.anim-slide-left.animate-active {
    opacity: 1;
    transform: translateX(0);
}

/* 从右进场 */
.anim-slide-right {
    opacity: 0;
    transform: translateX(50px);
}
.anim-slide-right.animate-active {
    opacity: 1;
    transform: translateX(0);
}

/* 从上到下 */
.anim-slide-down {
    opacity: 0;
    transform: translateY(-50px);
}
.anim-slide-down.animate-active {
    opacity: 1;
    transform: translateY(0);
}

/* 从下到上 */
.anim-slide-up {
    opacity: 0;
    transform: translateY(50px);
}
.anim-slide-up.animate-active {
    opacity: 1;
    transform: translateY(0);
}

/* 动画完成状态 */
.animate-completed {
    opacity: 1 !important;
}