[리액트] styled-components로 keyframe 구현하기

1. styled-components 설치하기

yarn add styled-components

 

2. keyframes import하기

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

 

3. keyframes 애니메이션 만들기

const 애니메이션이름 = keyframes`
  0% {
    /* 애니메이션이 0% 진행했을때 적용할 스타일 */
  }
  50% {
    /* 애니메이션이 50% 진행했을때 적용할 스타일 */
  }
  100% {
    /* 애니메이션이 100% 진행했을때 적용할 스타일 */
  }
`;

 

4. keyframes로 만든 애니메이션을 속성값으로 넣어주기

const Box = styled.div`
  animation: ${애니메이션이름} 2s;
`;