CSS Keyframes와 Animation을 사용한 모션 구현

CSS는 스타일과 레이아웃을 정의하는 중요한 도구입니다. 그 중에서도 CSS Keyframes와 Animation은 웹 페이지에 생동감과 인터랙티브한 요소를 추가하는 강력한 기능입니다. 이번 글에서는 CSS Keyframes와 Animation의 기본적인 개념과 사용 방법, 그리고 실제 예시를 통해 이해를 돕고자 합니다.

CSS Keyframes란?

CSS Keyframes는 애니메이션의 중간 상태들을 정의하는 데 사용됩니다. 각 keyframe은 애니메이션이 어떻게 진행될지를 설명하는 시점과 스타일을 지정합니다. 기본적인 구조는 아래와 같습니다.

@keyframes example {
  0% {
    background-color: red;
  } /* 시작 */
  50% {
    background-color: yellow;
  } /* 중간 */
  100% {
    background-color: green;
  } /* 끝 */
}

기본 Fade In

이 예시에서는 요소가 투명에서 불투명으로 전환되는 페이드인 효과를 만듭니다. from은 애니메이션 시작점(0%), to는 끝점(100%)을 나타냅니다.

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

색상 변경

이 애니메이션은 텍스트 색상이 빨간색에서 시작하여 파란색으로 변하고, 마지막에는 녹색으로 바뀝니다.

@keyframes colorChange {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: green;
  }
}

회전

여기서 요소는 0도에서 시작하여 360도까지 회전합니다. 이것은 한 바퀴 회전하는 효과를 만듭니다.

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

이동

이 예시에서 요소는 왼쪽에서 시작하여 오른쪽으로 100픽셀 이동합니다.

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

크기 변화

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

복합

이 예시에서는 요소가 처음에는 작고 투명하다가 중간에는 조금 커지고 부분적으로 불투명해지며, 마지막에는 원래 크기로 돌아와 완전히 불투명해집니다.

@keyframes complexAnimation {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

CSS Animation의 사용

CSS Animation은 keyframes를 사용하여 요소에 애니메이션 효과를 적용합니다. 이를 위해 다음과 같은 속성들이 사용됩니다.

animation-name: 사용할 keyframes의 이름을 지정합니다.
animation-duration: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.
animation-timing-function: 애니메이션의 속도 곡선을 정의합니다.
animation-delay: 애니메이션이 시작하기 전의 대기 시간을 설정합니다.
animation-iteration-count: 애니메이션이 몇 번 반복될지 지정합니다.
animation-direction: 애니메이션이 정방향, 역방향 또는 둘 다로 진행될지 정의합니다.

div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

Animation 속성 설명

animation 속성은 애니메이션 이름, 지속 시간, 타이밍 함수, 지연 시간, 반복 횟수, 방향, 채우기 모드 및 재생 상태와 같은 여러 애니메이션 관련 하위 속성을 하나의 축약된 형태로 지정합니다.

1. `animation-name`

@keyframes 규칙에서 정의한 애니메이션 이름을 지정합니다. none 값은 애니메이션이 없음을 의미합니다.
값: none | [애니메이션 이름]

animation-name: none;
animation-name: spin;
animation-name: fadeIn;

2. `animation-duration`

애니메이션이 완료되기까지 걸리는 시간을 지정합니다. 단위는 초(s) 또는 밀리초(ms)로 표현합니다.
값: [시간]

animation-duration: 0s;
animation-duration: 0.5s;
animation-duration: 2s;
animation-duration: 3.5s;

3. `animation-timing-function`

애니메이션의 속도 곡선을 정의합니다. linear, ease, ease-in, ease-out, ease-in-out는 사전 정의된 타이밍 함수입니다. cubic-bezier와 steps를 통해 사용자 정의 타이밍 함수를 만들 수 있습니다.
값: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | steps(int,start|end)

animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(.17,.67,.83,.67); // cubic-bezier(n,n,n,n)
animation-timing-function: steps(4, start); // `steps(int,start|end)`
animation-timing-function: steps(4, end); // `steps(int,start|end)`

4. `animation-delay`

애니메이션이 시작하기 전까지의 대기 시간을 지정합니다. 시간 단위로 표현합니다.
값: [시간]

animation-delay: 0s;
animation-delay: 0.5s;
animation-delay: 2s;
animation-delay: 3.5s;

5. `animation-iteration-count`

애니메이션이 몇 번 반복될지 지정합니다. infinite는 무한 반복을 의미합니다.
값: infinite | [숫자]

animation-iteration-count: infinite;
animation-iteration-count: 1;
animation-iteration-count: 3;

6. `animation-direction`

애니메이션이 어떤 방향으로 진행될지 결정합니다. normal은 정방향, reverse는 역방향, alternate는 정방향과 역방향을 번갈아 가며, alternate-reverse는 역방향과 정방향을 번갈아 갑니다.
값: normal | reverse | alternate | alternate-reverse

animation-direction: normal; // 정방향
animation-direction: reverse; // 역방향
animation-direction: alternate; // 정방향과 역방향을 번갈아 실행
animation-direction: alternate-reverse; // 역방향과 정방향을 번갈아 실행

7. `animation-fill-mode`

애니메이션이 시작하기 전과 끝난 후 요소의 스타일을 어떻게 적용할지 정의합니다. none은 애니메이션 전후 스타일이 적용되지 않음을 의미합니다. forwards는 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지합니다. backwards는 애니메이션 시작 전 첫 키프레임의 스타일을 적용합니다. both는 forwards와 backwards의 조합입니다.
값: none | forwards | backwards | both

animation-fill-mode: none; // 애니메이션 전후 스타일이 적용되지 않음
animation-fill-mode: forwards; // 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지
animation-fill-mode: backwards; // 애니메이션 시작 전 첫 키프레임의 스타일을 적용
animation-fill-mode: both; // `forwards`와 `backwards`의 조합

8. `animation-play-state`

애니메이션의 실행 상태를 제어합니다. running은 애니메이션이 실행 중임을 의미하고, paused는 애니메이션이 일시 정지됨을 의미합니다.
값: running | paused

animation-play-state: running;
animation-play-state: paused;

이러한 속성들은 개별적으로 사용하거나, animation 축약 속성을 통해 한 줄에 모두 적용할 수 있습니다. 예를 들어, animation: example 5s linear 2s infinite alternate;와 같이 사용할 수 있습니다.

계속 반복하는 애니메이션을 만드려면 이렇게 작성

animation-iteration-count: infinite; // 무한대
animation-direction: alternate; // 정방향과 역방향을 번갈아 실행
animation-fill-mode: forwards; // 애니메이션이 끝난 후 고정

Animation 속성을 이용해서 한 줄로 작성해보자

animation: [animation-name] [animation-duration] [animation-timing-function]
  [animation-delay] [animation-iteration-count] [animation-direction]
  [animation-fill-mode] [animation-play-state];

div {
  animation: myAnimation 3s ease-in 1s infinite alternate forwards running;
}

@keyframes는 CSS 애니메이션에서 중요한 역할을 합니다. 이 규칙을 사용하여 애니메이션 중에 발생하는 키프레임(특정 지점)에서의 스타일 변화를 정의합니다. 다양한 예시를 통해 @keyframes의 사용 방법을 설명하겠습니다.

CSS Keyframes란?

기본 Fade In

색상 변경

회전

이동

크기 변화

복합

CSS Animation의 사용

Animation 속성 설명

1. animation-name

2. animation-duration

3. animation-timing-function

4. animation-delay

5. animation-iteration-count

6. animation-direction

7. animation-fill-mode

8. animation-play-state