keyframes로 자동으로 움직이는 Carousel 만드는 법

 

    const CustomerReviews = () => { 
        return< div style={{paddingTop:"28px", overflow:"hidden"}}> {reviewData.length > 0 && ( 
            <div 
                className={styles.spotlightbox}
                onMouseEnter={(e) => e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'paused'}
                onMouseLeave={(e) => e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'running'}
            >
                <div className={styles.carousel}>
                    {[...reviewData, ...reviewData].map((item, index) => (
                        <div key={index} className={styles.carouselItem}>
                            <div className={styles.reviewContainer}>
                                <div>
                                    <div className={styles.reviewTitle}>{item.title}</div>
                                    <div className={styles.reviewDescription}>{item.desc}</div>
                                </div>
                                <div className={styles.reviewAuthor}>{item.author} {t('home:ReasonOfArtspoon.artist')} </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        )}
        </div>
    }

    const reviewData = [
        { 
            id: 0, 
            title: title0, 
            desc: desc0, 
            author: author0
        },
        { 
            id: 1, 
            title: title1, 
            desc: desc1, 
            author: author1
        }
    ]

---

.carousel {
    display: flex;
    animation-name: slide;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 80s;
    animation-play-state: running;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.carouselItem {
    margin-right: 24px;
    transition: 0.3s ease;
}

.reviewContainer {
    cursor: pointer;
    padding: 48px;
    border-radius: 20px;
    border: 1px solid #D2D2D2;
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 660px;
    height: 274px;
    align-items: flex-start;
    flex-shrink: 0;
    transition: transform 0.3s ease; /* 기본 상태에서도 transition 적용 */
}

.reviewTitle {
    color: #1C1C1E;
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.reviewDescription {
    color: #747474;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-top: 16px;
}

.reviewAuthor {
    color: #9449F5;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.spotlightbox {
    display: flex;
    width: 100%;
    position: relative;
}

.spotlightbox:hover .carousel {
    animation-play-state: paused; /* hover 시 애니메이션 멈춤 */
}

.carouselItem:hover .reviewContainer {
    transform: translateY(-20px) scale(1.03);
    transition: 0.3s ease;
}