make animation for button appear and dissapear with scale

Question

I am trying to make a css animation for my website, but i am not able to make it well. My problem is the next: I want to add a button that when appears scale 0 to 1, and when disappears has to scale 1 to 0, my code:

const Button = styled.button`
  -webkit-animation: fadeout 0.5s linear;
  display: ${({ hidden }) => hidden && 'none'};
  animation: createBox 0.4s ease-in-out;

  @keyframes createBox {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

`;

What I would like is that when the button disappears it scale 1 to 0 but i dont find the way to make it, thanks for any help

Answer 1

You're trying to use @keyframe inside the styled, but that is actually something that has to be defined at the root level.

But with styled components you can use keyframe.

import styled, { keyframes } from 'styled-components';

const createBox = keyframes`
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
`

const Button = styled.button`
  animation: ${createBox} 0.4s ease-in-out;
`;

The animation should start as soon as the button is being rendered into the DOM.