1. transition과 animation

일정 시간에 걸쳐 css의 속성값을 변화시키는 효과

transition

• 효과과 일정한 시간(duration)에 걸쳐 일어난다.
• 스스로 작동할 수 없기 때문에 onClick 함수나 hover와 함께 쓰인다.
• element 상태 변화에 사용하기 좋다.

animation

• transition에 비해 훨씬 구현할 수 있는 요소가 다양하다.
• 이벤트 없이 스스로 시작, 정지, 반복을 제어할 수 있다.
• @keyframes으로 이루어졌다.

예제(App.css)

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

App-logo-spin keyframes 이름으로 여기서 설정한 keyframes대로 동작
infinite 무한정 돌아가게 하는 속성
20s duration으로 해당 시간만큼 애니메이션을 지속
linear 애니메이션이 끊기지 않고 자연스럽게 이어지도록 하는 속성

React 파일을 생성하면 자동으로 생성되는 css 기본값이다.
현재는 속성이 한 줄에 축약돼서 적혀있지만 animation-name, animation-timing-function, animation-duration, animation-delay 등으로 각각 따로 적을 수도 있다.

2. keyframes

animation에서 사용하는 속성 혹은 animation에 주는 규칙. 특정한 구간에서 특정한 효과를 적용하는 기능이다. 영상편집시 사용하는 키프레임과 비슷한 개념이라고 생각하자.

예제(App.css)

@keyframes App-logo-spin {
  from { /* 시작 지점 */
    transform: rotate(0deg);
  }
  to { /* 끝나는 지점 */
    transform: rotate(360deg);

@keyframes App-logo-spin {
  0% { 
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

시작 지점과 끝나는 지점은 from과 to로 혹은 %로 설정할 수 있다. %의 경우 세밀한 표현이 가능하다.

3. styled-components에서 사용하기

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

styled-componets는 keyframes를 제공하기 때문에 패키지 설치 후 import 해주기만 하면 된다. 속성은 css와 똑같지만 사용법에서 약간의 차이가 있다.

예제(App.js)

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;
  `;

• animation을 적용할 요소와 keyframes을 만든다. 이때 keyframes은 순서상 요소의 앞에서 선언되어야 한다. 요소보다 뒤에 나오면 keyframes이 작동하지 않는다. const 변수는 변수의 위치보다 먼저 선언되면 사용할 수 없기 때문이다.
• keyframes는 요소의 animation 속성에서 ${변수}로 사용할 수 있다.