[react] styled components에서 animation 및 keyframes사용하기

styled-components

---

Animation과 keyframes

styled-components는 CSS의 @keyframes 규칙을 javascript 구문으로 통합하여 애니메이션을 적용할 수 있게 해 줍니다.

또한 keyframes를 생성하다 보면 비슷한 이름으로 중복되는 경우가 많은데요.

styled-components에서는 css의 @keyframes와 달리 컴포넌트 파일별로 네임스페이스가 구분되어 중복될 걱정 없이 keyframes를 생성할 수 있습니다.

 

import React from "react";
import styled, { keyframes } from "styled-components";
 
const App = () => <Circle />;
 
const bounce = keyframes`
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(0)
  }
  100% {
    transform: scale(1)
  }
`;
 
const Circle = styled.div`
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #ff7979;
  animation: ${bounce} 2s infinite;
`;
 
export default App;

 

 

bounce keyframes 적용결과