[React] Styled-Components를 이용한 애니메이션

애니메이션, Css로 제어
useEffect에서 setInterval 작업

 

const boxAnimation = keyframes`
  0% {
    left: 20px;
    background: red;
  }
  16.6666667% {
    left: 420px;
    background: orange;
  }
  33.3333333% {
    left: 20px;
    background: yellow;
  }
  50% {
    left: 420px;
    background: green;
  }
  66.6666667% {
    left: 20px;
    background: blue;
  }
  83.3333333% {
    left: 420px;
    background: navy;
  }
  100% {
    left: 20px;
    background: purple;
  }
`; 

const Box = styled.div`
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 0%;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${boxAnimation} 3s 0s infinite linear alternate;
`;

 

 

출처

https://github.com/AseemWangoo/expriments_with_react/blob/master/src/components/Fader/Fader.js

GitHub - AseemWangoo/expriments_with_react: Experiments with React

 

https://kjwsx23.tistory.com/625

[React] Styled-Components를 이용한 애니메이션

 

https://velog.io/@cinephile/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88%EB%B0%98-4-1-keyframes

[리액트 기초반] 4주차 - keyframes