React - how to make animation with CSS transition property

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:

 import React from 'react'; // --- style objects ------------------------------- const normalStyle = { margin: '50px', padding: '20px', borderRadius: '10px', width: '100px', height: '100px', background: '#06f2ff', boxShadow: '5px 5px 5px #04bd57', transition: '1s, transform 2s', }; const transformedStyle = { margin: '50px', padding: '20px', borderRadius: '10px', width: '150px', height: '150px', background: '#06ff76', boxShadow: '5px 5px 5px #3085d6', transition: '1s, transform 2s', transform: 'rotate(180deg)', }; const buttonStyle = { padding: '2px', border: '2px solid white', background: 'black', boxShadow: '5px 5px 5px grey', textShadow: '1px 1px 1px black', fontWeight: '900', color: 'white', borderRadius: '10px', }; // --- component ------------------------------------- const App = () => { const [bigSize, setBigSize] = React.useState(false); const handleClick = () => setBigSize(!bigSize); return ( <div style={{ height: '300px' }}> <div style={bigSize ? transformedStyle : normalStyle}> <button style={buttonStyle} onClick={handleClick}> Change size </button> </div> </div> ); }; export default App; 

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! 🔥