[Styled Component - 5] keyframes

styled-components에서 keyframes 함수를 사용하여 CSS 애니메이션을 정의할 수 있습니다. 

keyframes 함수를 사용하면 애니메이션의 이름과 애니메이션 키프레임을 정의할 수 있습니다.

 

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

// keyframes로 회전 애니메이션 정의
const rotateAnimation = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;

// 애니메이션을 적용할 컴포넌트
const AnimatedDiv = styled.div`
  width: 100px;
  height: 100px;
  background-color: #fca311;
  animation: ${rotateAnimation} 2s linear infinite;
`;

export default AnimatedDiv;