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

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>
)
}