UseInterval JS useState React и CSS для анимации ⇐ CSS

[Anonymous]

Я меняю текст между двумя значениями с помощью React useState и setInterval, и это работает нормально.

Код: Выделить всё

function Home() {
const [role, setRole] = useState("Text A");

const inter = setInterval(() => {
changeHome();
}, 5000);

function changeHome() {
role === "Text A" ? setRole("Text B") : setRole("Text A");

clearInterval(inter);
}

useEffect(() => {
//className&&setClassName("fade")
}, [role]);

return (


Hello!

I'm Karim Isaac

{role}


Hire Me
My works



);
}

export default Home;

Я пытаюсь добавить анимацию к тексту при его изменении с помощью CSS:

Код: Выделить всё

@keyframes fade-down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.fade {
animation: fade-down 2.5s infinite alternate;
}

Это работает, но время выбрано не совсем удачное. Я думаю, это потому, что есть два таймера; setinterval и таймер анимации.


Подробнее здесь: https://stackoverflow.com/questions/786 ... mation-css