TIL 201004

const menuAnimation = keyframes`
  0% {
    opacity: 0;
    transform: translateY(-20px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
`;


const Product = styled.div`
  animation: none;
  ...

  ${(props) => {
    return (
      props.isActive &&
      css`
        animation: ${menuAnimation} 1s forwards;
        animation-delay: ${props.index * 0.1}s;
      `
    );
  }};
`;

styled-components 에서 키프레임 활용하기