DEV Community

loading...

Discussion on: React - how to make animation with CSS transition property

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
Forem Open with the Forem app