React에서 Styled Components를 이용한 애니메이션 구현

• 일반적인 CSS 문법과 다르게, Styled Components에서는 다음과 같이 작성한다.

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

const boxFade = keyframes`
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`
const StyledWrapper = styled.div`
   animation: ${boxFade} 2s 1s infinite linear alternate;

`;

• 근본적인 원리는 같으며, keyframes 속성에 대한 변수를 선언하고, 해당 변수를 적용하고자 하는 요소 내부에 작성하면 된다.