.d-move-none {
    animation: animation-d-move-none 1s linear both;
    animation-timeline: scroll();
    animation-range: 0vh 10vh; /* 滾動 10vh 內完成轉變 */
}

@keyframes animation-d-move-none {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px); /* 假設我們想要讓元素向上消失 */
    }
}



.move-down-10 {
    animation: animation-move-down-10 1s linear both;
    animation-timeline: scroll();
    animation-range: 0vh 10vh;
}

@keyframes animation-move-down-10 {
    0% {
    }

    100% {
        transform: translateY(10px);
    }
}





















/* ── Carousel 隨機切換特效 ── */
#carouselExampleFade {
    background-color: #000;
}

    #carouselExampleFade .zoom-img {
        transform: scale(1);
        opacity: 1;
        transition: none;
    }

    #carouselExampleFade .carousel-item.active .zoom-img {
        transform: scale(1);
        opacity: 1;
    }

    #carouselExampleFade .carousel-item:first-child.active .zoom-img {
        animation: none;
    }

    #carouselExampleFade .carousel-item .image-container {
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
    }

.image-container.fx-zoom-in {
    animation-name: carouselZoomIn;
}

.image-container.fx-zoom-out {
    animation-name: carouselZoomOut;
}

.image-container.fx-slide-up {
    animation-name: carouselSlideUp;
}

.image-container.fx-slide-down {
    animation-name: carouselSlideDown;
}

.image-container.fx-rotate-in {
    animation-name: carouselRotateIn;
}

.image-container.fx-blur-in {
    animation-name: carouselBlurIn;
}

.image-container.fx-slide-left {
    animation-name: carouselSlideLeft;
}

@keyframes carouselZoomIn {
    from {
        transform: scale(0.85);
    }

    to {
        transform: scale(1);
    }
}

@keyframes carouselZoomOut {
    from {
        transform: scale(1.15);
    }

    to {
        transform: scale(1);
    }
}

@keyframes carouselSlideUp {
    from {
        transform: translateY(8%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes carouselSlideDown {
    from {
        transform: translateY(-8%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes carouselRotateIn {
    from {
        transform: rotate(-3deg) scale(1.05);
    }

    to {
        transform: rotate(0) scale(1);
    }
}

@keyframes carouselBlurIn {
    from {
        filter: blur(12px);
    }

    to {
        filter: blur(0);
    }
}

@keyframes carouselSlideLeft {
    from {
        transform: translateX(8%);
    }

    to {
        transform: translateX(0);
    }
}