How can I animate the quote text and author appearance?

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

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.