[CSS] 애니메이션의 기본 원리

keyframes 속성: 애니메이션의 핵심

keyframes 속성은 애니메이션의 각 단계를 정의하는 데 사용됩니다. 마치 영화 필름의 한 장면 한 장면을 설정하는 것과 같이, keyframes를 통해 애니메이션의 시작점, 중간 지점, 끝점 등을 지정하고, 각 지점에서의 스타일을 설정합니다.

 

@keyframes myanimation {
  0% {
    /* 애니메이션 시작 시 스타일 */
    transform: translateX(0);
  }
  50% {
    /* 애니메이션 중간 지점 스타일 */
    transform: translateX(200px);
  }
  100% {
    /* 애니메이션 끝 지점 스타일 */
    transform: translateX(400px);
  }
}

 

위 예시에서 myanimation이라는 이름의 애니메이션이 정의되었습니다. 0%는 애니메이션 시작 시, 50%는 중간 지점, 100%는 끝 지점을 의미하며, 각 지점에서 요소가 x축 방향으로 이동하는 것을 나타냅니다.

animation-name 속성: keyframes 연결

animation-name 속성은 실제 요소에 애니메이션을 적용할 때, 앞서 정의한 keyframes를 연결하는 역할을 합니다.

 

div {
  animation-name: myanimation;
  animation-duration: 2s;
}

 

위 예시의 div 요소에 myanimation이라는 이름의 애니메이션이 적용됩니다.

animation-duration 속성: 애니메이션 재생 시간

animation-duration 속성은 애니메이션이 한 번 재생되는 데 걸리는 시간을 설정합니다. 단위는 초(s) 또는 밀리초(ms)를 사용합니다.

 

div {
  animation-duration: 2s;
}

 

위 예시에서는 애니메이션이 2초 동안 재생됩니다.

애니메이션의 실행 순서와 동작 방식

1. keyframes 정의: @keyframes 블록을 사용하여 애니메이션의 각 단계를 정의합니다.
2. 요소에 애니메이션 적용: animation-name 속성을 사용하여 요소에 keyframes를 연결합니다.
3. 애니메이션 시작: animation-duration 속성을 사용하여 애니메이션 재생 시간을 설정하고, animation-play-state 속성을 running으로 설정하여 애니메이션을 시작합니다.
4. 애니메이션 진행: 브라우저는 지정된 시간 동안 keyframes에 정의된 스타일을 순차적으로 적용하며 애니메이션을 재생합니다.
5. 애니메이션 종료: 애니메이션이 끝나면 animation-iteration-count 속성에 따라 반복하거나, animation-fill-mode 속성에 따라 최종 상태를 유지합니다.

다양한 애니메이션 속성과 예제

• animation-iteration-count: 애니메이션 반복 횟수를 설정합니다.
• animation-timing-function: 애니메이션의 속도 변화를 조절합니다. (linear, ease, ease-in, ease-out, ease-in-out 등)
• animation-delay: 애니메이션 시작 시점을 지연시킵니다.
• animation-fill-mode: 애니메이션이 끝난 후 요소의 스타일을 유지하는 방식을 설정합니다. (none, forwards, backwards, both)

 

div {
  animation-name: myanimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-functi

 

on: ease-in-out;
  animation-fill-mode: forwards;
}

 

위 예시에서는 애니메이션이 무한 반복되며, 시작과 끝에서 속도가 점차 감소하고 증가합니다. 애니메이션이 끝나면 최종 상태가 유지됩니다.

실제 예제: 움직이는 버튼

 

<button>Click me</button>

 

 

button {
  animation: mybutton 2s infinite;
}

@keyframes mybutton {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

 

위 예제는 버튼을 위아래로 움직이는 간단한 애니메이션을 구현합니다.