이 게시물은 2016년 8월 30일 수정판입니다.

이야기에 앞서

이 카드에서 다루는 @keyframes Rule과 animation 속성은, CSS에서 애니메이션을 위해 사용하는 공식 규칙입니다. 이전 카드에서 다루었던 2D Transform, 3D Transform 메소드와 함께 사용해서 애니메이션을 작성할 수 있습니다.

하지만 CSS는 그 작동 메커니즘 자체의 문제로, 애니메이션을 제대로 통제하기 힘든 부분이 있습니다. 약 3에서 4초 정도의 짤막한 애니메이션은 상관 없으나, 시간의 분기가 많이 발생하는 고급 애니메이션에서는 사용하기 힘드므로, 여기서도 너무 심도있게 학습하지 말고 한번 쭉 읽어보면서 개념정리 정도로 학습하기 바랍니다.

이 카드를 통한 성취 목표

• CSS에서 어떻게 애니메이션을 처리하는지 살펴봅니다.
• CSS에서 애니메이션을 처리할 때 어떤 문제가 있는지 파악합니다.

CSS 구문

CSS의 애니메이션은 @keyframes Rule과 animation 속성을 통해 구현됩니다.

@keyframes Rule에서는 객체가 시간의 흐름에 따라 어떻게 변형될 지 모양새에 관련된 선언을 하고, animation 속성에서는 타이밍, 지연시간, 반복 등 움직임에 관한 선언을 합니다.

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

div { animation: myAnimation 5s infinite; }

위 예문은 서로 상호적으로 작동하기 때문에, 처음 이 구문을 보는 사람은 다소 난해할 수 있습니다. 아래의 순서를 보면 서로 어떤 관계를 가지고 작동하는지 파악할 수 있습니다.

1. @keyframes Rule을 사용해서 애니메이션의 이름을 하나 지어줍니다. 예제에서는 myAnimation으로 지었습니다.
2. myAnimation은 투명도가 0에서 1로 변화하는 움직임을 가진 애니메이션이 되었습니다.
3. div 태그에 animation 속성을 사용해서, 이 태그가 어떤 애니메이션을 사용할지 이름(myAnimation)을 알려줍니다.
4. 이 애니메이션이 5초(5s)에 걸쳐 움직이도록 선언합니다.
5. 이 애니메이션이 무한반복(infinite) 하도록 선언합니다.

@keyframes Rule

CSS에서 사용하는 애니메이션은, 2개의 주축이 되는 키프레임 사이에 위치한 중간 프레임의 움직임을 자동으로 처리하는 선형 보간(Linear Interpolation) 방식 애니메이션입니다. 따라서, 키프레임을 더 많이 만들수록 더 디테일한 움직임을 표현할 수 있습니다.

따라서 아래처럼 키프레임 단계를 더 세분화할 수도 있습니다. 50%까지는 글꼴이 30px까지 커졌다가, 애니메이션의 마지막인 100%에 다다랐을 때에는 다시 10px로 작아집니다.

@keyframes myAnimation {
  0%    { font-size: 10px; }
  25%   { font-size: 20px; }
  50%   { font-size: 30px; }
  70%   { font-size: 20px; }
  100%  { font-size: 10px; }
}

만일, 애니메이션의 시작과 끝이 같다면 콤마(,)로 분리해서 선언해주고, 중간 프레임만 따로 선언해 줄 수 있습니다. 아래 예제는 글꼴 크기 10px로 시작해서 50%에 다다르면 크기가 50px이 되고, 다시 마지막에 10px이 됩니다.

@keyframes myAnimation {
  0%, 100% { font-size: 10px }
  50% { font-size: 50px }
}

키프레임을 선언하는 방식에는 다음과 같이 from, to를 사용할 수도 있습니다.

@keyframes myAnimation {
  from { font-size: 10px; }
  to   { font-size: 20px; }
}

하지만 이 방식보다는 퍼센테이지(%)를 이용하는 것이 좋습니다. 위에서 설명했듯이, from to 방식의 선언은 단 2개의 키프레임만을 가지므로, 움직임을 표현하는데 있어 단조로울 수 밖에 없습니다.

animation 속성

속성별 선언

animation 속성을 통해 @keyframes Rule에서 선언한 객체의 변형에 실질적인 움직임을 줄 수 있습니다. 속성별로 모두 풀어 선언하는 방식은 다음과 같습니다.

.div1 {
   animation-name: myAnimation;
   animation-duration: 4s;
   animation-iteration-count: 10;
   animation-direction: alternate;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-delay: 2s;
}

속성들이 어떤 역할을 하는지 알아볼까요. 속성 이름이 다소 길기 때문에, 아래에서는 속성 이름에서 animation- 부분을 생략하고 기재했으니 착오 없기 바랍니다.

@keyframes myAnimation {
  0%    { left: 0px }  /* @keyframes Rule에서 선언한 위치 */
  100%  { left: 100px }
}

div { 
	left: 20px;        /* selector에서 선언한 위치 */
	animation-name: myAnimation;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

단축형 작성법

속성을 단축해서 선언할 수 있습니다. 속성에 대한 값을 정해진 순서에 따라 선언하면 됩니다.

animation: myAnimation 1s 2s 3 alternate backwards

위 예문 값의 순서는 다음과 같습니다.

animation : name duration delay iteration-count direction fill-mode

복수 선언

2개 이상의 @keyframes Rule로 정의 된 애니메이션을 함께 선언할 수 있습니다. 이때는, 첫 번째 애니메이션 선언의 마지막에 콤마(,)를 사용해서 연결해 주어야 하는 점에 유의하세요.

.div1 {
   animation: 
      myAnimation_01 2s infinite, 
      myAnimation_02 1s;
}

Steps 선언

애니메이션의 흐름을 Step(단계)화해서 제어할 수 있습니다. duration 값과 연계해서 선언하여 일종의 Frame Rate(초당 프레임 수)를 설정하거나 혹은, 셀 애니메이션처럼 연계된 동작을 표현할 수도 있습니다. steps(스텝 수)로 선언합니다.

@keyframes myAnimation {
  0% { left: 0; }
  100%   { left: 100px; }
}

.div1 {
  animation: myAnimation 10s steps(10) infinite;
}

위 예문에서는, 오른 방향으로 10초에 걸쳐 100px 이동하는 애니메이션의 단계를 10으로 선언하였습니다. 이 경우, .div1은 1초에 10px씩 총 10초에 걸쳐 움직입니다. 어떻게 보면 움직임이 부드럽지도 않고, 굳이 프레임 수가 떨어지는 애니메이션을 만들 필요가 있나 싶지만, Simurai의 예제를 보면 어떤 상황에 이용해야 하는지 이해할 수 있습니다.

총 10개의 이미지들이 각각 50px 간격으로 500px에 걸쳐 그려져 있기 때문에, steps()단계를 10으로 설정하면 셀 애니메이션 같은 동작을 얻을 수 있습니다.

도움이 될 만한 링크

이 문서에서 설명은 했지만 깊이 있게 다루지 않은 일부 내용들에 대해 좀 더 자세한 내용을 다루는 링크를 엄선했습니다. 필자가 직접 끝까지 읽어보고 다른 기사들과 비교까지 마친 좋은 문서들이니, 깊이 있는 학습을 원하는 분들은 참고하기 바랍니다.

• Easing의 기본사항 : 움직임에 현실감을 주는 Easing에 대해 구글 개발자 문서에서 자세히 다루고 있습니다. 필체가 다소 딱딱하기는 하나, 간단한 예제들이 함께 있어 이해하기 좋습니다.

  CSS에서의 Easing은 Adobe After Effects나 기타 Interpolation 방식 애니메이션 툴의 Easing과 반대의 개념을 가집니다. 이 말의 의미는 지금 몰라도 상관없으나, 기존에 애니메이션 툴을 많이 다뤘던 사람은 유의하시기 바랍니다.

• 시작/끝 상태 제어(animation-fill-mode) : animation-fill-mode에 대해 알기 쉬운 예제와 함께 설명하고 있습니다.