[styled-components] animations

 

 

  styled-components에서 애니메이션을 적용하는 방법에는 여러 가지가 있다. 가장 간단한 방법은 CSS 애니메이션을 사용하는 것이다. 이를 위해서 keyframes를 정의하고 이를 styled-components에 전달하여 사용할 수 있다. 다음과 같이 keyframes를 사용하여 회전하는 애니메이션을 만들 수 있다.

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

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
`;

const Rotate = styled.div`
  display: inline-block;
  animations: ${rotate360} 2s linear infinite;
`

이 코드는 Rotate라는 div를 만들고 keyframes 함수를 사용하여 rotate360 애니메이션을 정의한다. 그리고 이 애니메이션을 Rotate 컴포넌트에 animation 속성으로 전달하여 적용한다.

 

  또 다른 방법은 @keyframes CSS at-rule을 사용하는 것이다. 이를 위해서 styled-components의 css 유틸리티 함수를 사용한다.

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

const rotate360 = css`
  @keyframes rotate360 {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(360deg);
    }
  }
`

이 코드는 rotate360이라는 css변수를 만들고 이 변수에 @keyframes를 사용하여 rotate360 애니메이션을 정의한다. 그리고 이 애니메이션을 Rotate 컴포넌트에 animation 속성으로 전달하여 적용한다.

  또한 styled-components에서 keyframes 함수와 css 유틸리티 함수를 조합하여 다양한 애니메이션 효과를 생성하는 애니메이션 라이브러리도 존재한다.

 

• styled-components에서 keyframes를 사용하여 애니메이션을 생성할 때 자주 사용하는 속성들

1. 'from' and 'to': 시작과 끝 값을 지정한다.

@keyframes example {
  from { opacity: 0; }
  to { opacity: 1; }
}

 

2. '0%' to '100%': 시작과 끝 값을 퍼센트로 지정한다.

@keyframes example {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

 

3. delay: 애니메이션의 시작 시간을 지연시킨다.

@keyframes example {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

div {
  animation-name: example;
  animation-duration: 1s;
  animation-delay: 2s;
}

 

4. iteration-count: 애니메이션의 반복 횟수를 설정한다.

div {
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

 

5. direction: 애니메이션의 방향을 설정한다.

div {
  animation-name: example;
  animation-duration: 1s;
  animation-direction: reverse;
}

 

6. fill-mode: 애니메이션이 실행 전과 후에 어떻게 요소를 스타일링할지를 설정한다.

div {
  animation-name: example;
  animation-durations: 1s;
  animation-fill-mode: forwards;
}

 

7. easing: 애니메이션의 속도 곡선을 설정한다.

div {
  animation-name: example;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

 

8. animations-play-state: 애니메이션의 재생/일시정지 상태를 설정한다.

div {
  animation-name: example;
  animation-duration: 1s;
  animation-play-state: paused;
}