add animation on text and repeat that same animation after every slide

Question

I am learning react and code a function for image slider and change image title with every slide change.

but I want to add any other animation on this text only and repeat that same animation after every slide change.

I don't know how to do it can anyone help me please.

I provide live working demo link for your batter understanding.

https://codesandbox.io/live/a1dd4cecd03

import React, {useEffect, useState} from 'react'
import './Slider.css'
import BtnSlider from './BtnSlider'
import DataSlider from './DataSlider'

export default function Slider() {

    const [slideIndex, setSlideIndex] = useState(1)

    const nextSlide = () => {
        if(slideIndex !== DataSlider.length){
            setSlideIndex(slideIndex + 1)
        } 
        else if (slideIndex === DataSlider.length){
            setSlideIndex(1)
        }
    }

    const prevSlide = () => {
        if(slideIndex !== 1){
            setSlideIndex(slideIndex - 1)
        }
        else if (slideIndex === 1){
            setSlideIndex(DataSlider.length)
        }
    }

    useEffect(() => {
        const slideInterval = setInterval(() => {
           nextSlide()
        }, 10000);
        return () => clearInterval(slideInterval);
      }, [slideIndex]);

      
    const moveDot = index => {
        setSlideIndex(index)
    }



    return (
        <div className="container-slider">
                {DataSlider.map((obj, index) => {
                    return (
                        <div className='bgco'>
                            <div className='overlay_shadow'></div>
                            <div key={obj.id} className={slideIndex === index + 1 ? "slide active-anim" : "slide"}>

                                <div className='slider_name'>
                                    <span>{obj.title}</span>
                        
                                </div>

                                <img src={process.env.PUBLIC_URL + `/images/img${index + 1}.jpg`}/>

                            </div>
                        </div>
                    )
                })}

            <BtnSlider moveSlide={nextSlide} direction={"next"} />
            <BtnSlider moveSlide={prevSlide} direction={"prev"}/>

            <div className="container-dots">
                {Array.from({length: 5}).map((item, index) => (
                    <div 
                    onClick={() => moveDot(index + 1)}
                    className={slideIndex === index + 1 ? "dot active" : "dot"}
                    ></div>
                ))}
            </div>
        </div>
    )
}