Why does the animation only fire once?

Question

Sass

I'm trying to make a fade effect on a slider. But the animation only fires once.
Component:

const [activeSlide, setActiveSlide] = useState(1);
    const [intervalId, setIntervalId] = useState(null);
    const {t} = useTranslation();

    const slides = useMemo(() => [
        {id: 1, text: t('abclass.lessonsPerMonth'), icon: <CalendarIcon />},
        {id: 2, text: t('abclass.learnChess'), icon: <CalendarIcon />},
        {id: 3, text: t('abclass.certificates'), icon: <CalendarIcon />},
        {id: 4, text: t('abclass.statistic'), icon: <CalendarIcon />},
        {id: 5, text: t('abclass.homework'), icon: <CalendarIcon />}
    ], []);

    const images = useMemo(() => [
        "https://avatars.mds.yandex.net/get-zen_doc/1222645/pub_5b95308bf3ce7200aad896cd_5b953eb746f39d00aa674b68/scale_1200",
        "https://img3.goodfon.ru/wallpaper/nbig/d/8a/kasatka-pryzhok-gory.jpg",
        "http://quick-trips.com/wp-content/uploads/2017/12/4444444444444445.jpg",
        "https://images.wallpaperscraft.ru/image/mclaren_p1_krasnyj_sportkar_vid_sboku_109728_4000x2667.jpg",
        "https://avatars.mds.yandex.net/get-zen_doc/34175/pub_5c07951379557300aa9629b6_5c07abd381ae5000a9d16f79/scale_1200"
    ], [])


    useEffect(() => {
        let interval = setTimeout(() => {
            if (activeSlide === slides.length) setActiveSlide(1)
            else setActiveSlide(activeSlide + 1)
        }, 5000)
        setIntervalId(interval)
        return () => {
            clearInterval(interval)
        }
    }, [activeSlide])

    return (
        <div className={style.container}>
            <div className={style.img}>
                <img className={style[`img__slide${activeSlide}`]} alt="slide" src={images[activeSlide-1]}/>
            </div>
            <div className={style.slides}>
                {
                    slides.map(slide => (
                        <div
                            key={slide.id}
                            className={classnames(style.slides__slide, {
                                [style.slides__slide_active]: activeSlide === slide.id
                            })}
                            onClick={() => {
                                clearInterval(intervalId)
                                setActiveSlide(slide.id)
                            }}
                        >
                            {slide.icon}
                            <p>{slide.text}</p>
                        </div>
                    ))
                }
            </div>
        </div>

Styles:

.container {
  display: flex;
  width: 100%;
  margin: 0 auto 145px;
  max-width: 1090px;
}

.img {
  flex: 1;
  margin-right: 45px;
  height: 500px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  @for $i from 1 through 5 {
    .img__slide#{$i} {
      opacity: 0;
      animation: fade .3s ease-in forwards;
    }
  }
}

.slides {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 250px;
  padding: 15px 0;
  &__slide {
    display: flex;
    cursor: pointer;
    align-items: center;
    font-size: 16px;
    width: 100%;
    height: 75px;
    line-height: 18px;
    position: relative;
    color: #676767;
    border-bottom: 1px solid #E8E8E8;
    svg {
      flex: none;
    };
    p {
      margin-left: 20px;
    }
    &:hover {
      color: #000
    }
    &_active {
      color: #000 !important;
      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: #89DAE2;
        width: 0;
        animation: progress 5s linear;
        transform: translateY(1px);
      }
    }
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Why does the animation work once if my class changes? How to fix it? Thanks in advance for any help!

Answer 1

animation: 5s linear infinite;