[CSS3] Animation

Animation (개체에 애니메이션 효과를 주다)
CSS3 에는 웹 페이지 개체에 동적인 효과를 주기 위한 흥미로운 기능들이 추가되었는데
앞서 살펴본 Transition 이나 Transform 과 같은 특성들이 바로 그것이다

여기에 더불어 Animation 이라는 특성도 추가되었는데 이것은 말 그대로 웹 페이지에 애니메이션을 구현할 수 있는 특성이다. 물론 Transition 이나 Transform 과 같은 특성으로 애니메이션 효과를 줄 수는 있지만 이는 임의의 (정해진) 한 상태에서 다른 상태로의 변화를 주어 동적 효과를 주는 것인 반면 Animation 을 이용하면 동적 효과의 시작점과 종료점을 명시적으로 제어할 수 있다는 특징이 있다

즉 Transition 이나 Transform 은 변화된 상태, 변화하는 과정은 제어할 수 있지만 변화의 시작부터 종료까지의 제어는 별도의 스크립트를 통해서만이 가능하다는 것이다

Animation 에서 제어할 수 있는 변화의 시작점과 종료점은 키프레임(keyframe)이라는 개념으로 설명된다. 플래시나 다른 동적 효과를 다루는 툴을 다뤄봤다만 키프레임이라는 단어가 익숙할 것이다
키프레임을 간단히 설명하면, 애니메이션을 구성하는 동작의 키가 되는 프레임을 말하며 이 프레임들의 연결 및 이동으로 자연스러운 동적 효과의 처리가 가능하다

웹킷 기반 브라우저에서만 가능
Transitino 이나 Transform 은 비록 그 스펙이 완성되지는 않았지만 브라우저별 접두어를 사용하는 임시특성을 이용할 수 있었지만 Animation 은 현재까지 웹킷 기반 브라우저만 지원하고 있다
즉 사파리와 크롬 브라우저에서만 Animation 을 지원하고 있다
(따라서 이 글에서는 W3C의 표준명 대신 -webkit- 접두어를 이용하여 설명하기로 한다)

키프레임
Animation 효과 중심이 되는 개념이라 할 수 있다
애니메이션 효과를 위한 CSS속성을 각각의 프레임으로 정의하고 이 프레임들이 연결되어 동적효과를 주게 된다. 즉 애니메이션을 위한 시작~종료 사이의 동적 효과를 각각의 프레임으로 정의하는 것이다

키프레임의 간단한 예를 보도록 하자. 아래 코드는 두개의 키프레임을 정의한 것이며 각각은
투명도와 너비 속성의 변화를 주는 것이며 from ~ to 즉 시작과 종료 프레임을 정의한 것이다
(키프레임 정의 오른쪽의 myAnimation 은 이 프레임셋의 이름(name)이다)

@-webkit-keyframes myAnimation {
  from { opacity: 0.1; width: 150px;  }
  to    { opacity: 1.0; width: 300px; }
 }

키프레임은 비율로도 나눌 수 있는데 다음과 같이 정의할 수 있다. 애니매이션 효과를 위한 4개의 프레임이 비율로 정의되었으며 정해진 시간 내 비율에 맞게 변화가 이어져 나갈 것이다

@-webkit-keyframes myAnimation  {
  0%     { left: 100px; }
  40%   { left: 150px; }
  60%   { left: 75px;  }
  100% { left: 100px; }
}

form, to, 그리고 비율을 혼합하여 정의할 수도 있다

애니메이션 속성
키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다

-webkit-animation-name
키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다

-webkit-animation-duration
애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다
(기본 값: 0)

-webkit-animation-iteration-count
애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다
두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다
만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1)

-webkit-animation-direction
키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal)

-webkit-animation-timing-function
키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하며 다음 글을 참고 바란다
(기본 값: ease) [CSS3] Transition

-webkit-animation-play-state
애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running)
애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다

-webkit-animation-delay
애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작)


애니메이션의 간단한 예
키프레임과 애니메이션 속성을 이용하여 간단한 동적 효과를 처리해 보자
이미지의 투명도와 너비 그리고 회전각의 변화를 두 개의 프레임으로 정의하였다
애니메이션 속성은, 2초 동안 정방향<->역방향을 번갈아 가면서 무한대로 실행하도록 한다

<img src="son1.bmp">
.....
<style>
@-webkit-keyframes myAnimation {
 from {
    opacity: 0.1;
    width: 150px;
    -webkit-transform: rotate(15deg);
  }
 to {
    opacity: 1.0;
    width: 300px;
    -webkit-transform: rotate(0deg);
  }
}

 img {
   -webkit-animation-name: myAnimation ;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate;
 }
</style>

데모를 실행하면 이미지의 크기와 투명도 그리고 회전각도의 변화가 지속적으로 번갈아 가며 실행되는 것을 확인 할 수 있을 것이다

è

참고>
http://www.w3.org/TR/css3-animations/
http://robertnyman.com/2010/05/06/css3-animations/
http://webkit.org/blog/324/css-animation-2/