React — how to make animation with CSS transition property

Dirask React
2 min readMar 19, 2021

Hi there! 👋😊

In this article, I would like to show you how to make an animated rotating square in React using transition property. ⏭

Before we start, I would highly recommend you to check out the runnable example for the solution on our website:
React — how to make animation with CSS transition property

Final effect:

Below example presents three style objects:

  • normalStyle which is the default style of our div element,
  • transformedStyle which is transformed style of our div element,
  • buttonStyle which is style of our button element.

The styles of our div have transition value set to '1s'. It means our component will change it's property values smoothly, over a given duration (over 1s). Additional transform parameter describes moving of an element. In our case transform rotates the element during 2s.

Practical example:

You can run this example here

📝 Note:
If the duration is not specified, the transition will have no effect, because the default value is
0.

If you found this solution useful you can leave a comment or reaction 👏.
Thanks for your time and see you in the upcoming posts! 😊

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you’re looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Dirask React
Dirask React

Written by Dirask React

We share coding tips and tricks in React❤️ 💻 🙂. We help to solve React problems at http://dirask.com

No responses yet

Write a response