DEV Community

loading...
Cover image for React - how to make animation with CSS transition property

React - how to make animation with CSS transition property

diraskreact profile image Dirask-React Originally published at dirask.com ใƒป2 min read

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:
image

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;
Enter fullscreen mode Exit fullscreen mode

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! ๐Ÿ”ฅ

Discussion (1)

pic
Editor guide
Collapse
lexlohr profile image
Alex Lohr

Small hint: use the spread selector to make obvious which styles are changed:

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 = {
  ...normalStyle,
  width: '150px',
  height: '150px',
  background: '#06ff76',
  boxShadow: '5px 5px 5px #3085d6',
  transform: 'rotate(180deg)',
};
Enter fullscreen mode Exit fullscreen mode