TIL - Styled-component에서 keyframes 사용법

1. keyframes

---

  사용되는 스타일 속성은 'transtion'과 'animation'이 있는데 'transition'의 경우 단순한 엘리먼트 상태변화에 사용하기 좋고 'animaiton'은 다이나믹한 효과를 주는데 사용하기 좋다.

const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;
  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;

위와 같은 방식으로 내가 적용하고 싶은 효과를 작성하고

const Box = styled.div`
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: green;
    position: absolute;
    top: 20px;
    left: 20px;
    animation: ${boxFade} 2s 1s infinite linear alternate;
  `;

기존에 작성해 두었던 style에 마지막 부분같이 추가하면 된다.
변수명 같은 것도 정리해 두고 싶었는데 이건 다음에...

2. 참조

---

스파르타 코딩클럽 리액트 기초반 4주차 강의자료