How can I animate the quote text and author appearance?

JavaScript
1

Demo: Live
Do I need to use animation with keyframes to animate the text or using transition?

If you have noticed the animation works only when the page load but when I click again ,the animation does not work.

GitHub source: Text Component

Thank you

2
3

If you add the key prop to the component and pass it the color prop it should re-trigger the animation. But all you get is a fade-in and not a fade-out. For that, I think you need two separate animations that likely need to be triggered using props.

Using something like Framer Motion might be an easier way of using animations.