[ styled components ] keyframe 사용법

styled components가 제공하는 keyframes로 만들고 싶은 애니메이션을 정의한 후, 변수 사용하듯이 ${ }로 감싸서 사용한다.

 

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

const fadeIn = keyframes`
  0% {
    transform: scale(0) translate(-50%);
  }
  100% {
    transform: scale(1) translate(-50%);
  }
`;

export const StyledComponents = styled.div`
  animation: ${fadeIn} 0.3s ease forwards;
`;