Programming/HTML CSS
키프레임(keyframe)은 정해진 시간분할에 따라 %단위로 애니메이션(animation)을 구현하기 위한 것이며 이를 위해 animation- 속성 사용 후 키프레임(keyframe)과 연결하여 애니메이션을 구현하게 됩니다.

그럼 이제 keyframe과 animation 속성을 어떻게 사용하는지 예제를 통해 알아보도록 하겠습니다. 우선 아래와 같이 div하나를 생성한 후
<div id="test_div">
  The cockpit of the A-10C contains three primary instrument panels that include gauges and indicators that display flight parameters, aircraft system states, engine state, control positions, and system warnings.
</div>
생성한 div에 관련 CSS3속성과 애니메이션(animation)을 적용을 위한 키프레임(keyframe)을 작성합니다.
#test_div {
   width: 100px;
   background-color: blue;
  }

@keyframes ani {
   from {
    width:100px;
   }

   to {
    width:500px;
   }
}
키프레임(keyframe)은 위와 같이 @keyframe으로 작성하며 뒤에 keyframe의 이름을 지정합니다. 예제에서는 이름을 ani라고 지정하였으며 실제 이름은 임의로 작성합니다.

키프레임(keyframe)안에 from과 to가 있는데 여기서 from은 0%시간대를, to는 100%시간대를 의미합니다.

keyframe 작성이 끝나면 animation-name속성을 사용하여 미리 작성한 keyframe과 연결합니다. 이렇게 하면 해당 keyframe에 정해진 대로 애니메이션(animation)이 구현될 것입니다.
#test_div {
   width: 100px;
   background-color: blue;

   animation-name: ani;
   animation-duration: 5s;
}
test_div의 CSS속성에 추가된 animation-duration 속성을 통해 5초간 애니메이션(animation)이 구현되도록 하였습니다.

위와 같이 예제를 작성한 후 브라우저(browser)를 통해 보면 5초동안 keyframe에서 지정한 from(0% -> 0초)에서 to(100% -> 5초)까지 설정된 만큼 크기가 변하는 것을 볼 수 있습니다.

만일 keyframe을 통해 50%(2.5초)정도의 시간차에서 특정한 동작을 구현하려면 다음과 같이 지정하고자 하는 %대를 선언하고 from이나 to와 같이 특정 동작을 지정하면 됩니다.
@keyframes ani {
   from {
    width:100px;
   }

   50% {
    width:400px;
   }

   to {
    width:500px;
   }
}
▶ keyframe을 통해 50%(2.5초대) 상황에서 div크기를 400px가 되도록 지정하였습니다.

CSS3에서 애니메이션(animation) 구현을 위해 사용할 수 있는 animation 속성은 다음과 같은 것들이 있습니다.

1. animation-name

키프레임(keyframe)은 이름만 달리하면 여러개 생성할 수도 있습니다. 이때 animation-name 속성은 여러개의 키프레임(keyframe)중 어떤것을 연결할지 지정하는 속성입니다.

2. animation-play-state

애니메이션(animation)이 재생될때 재생상태를 지정하는 속성입니다. 예를 들어 예제의 div를 통해 애니메이션(animation)이 재생되는 경우 해당 div에 마우스를 올릴때 애니메이션(animation) 재생을 중단하고자 한다면 다음과 같이 animation-play-state 속성을 지정하면 됩니다.
#test_div:hover {
   animation-play-state: paused;
}
3. animation-duration

애니메이션(animation)이 얼마동안 구현될지에 대한 시간을 지정합니다.

4. animation-delay

애니메이션(animation)을 즉시 재생하지 않고 지정한 시간동안 지연 후 재생하도록 합니다.

5. animation-iteration-count

애니메이션(animation)반복 횟수를 지정합니다. 원하는 횟수만큼의 숫자를 지정하거나 무한대일 경우 infinite를 지정합니다.

6. animation-timing-function

애니메이션(aniamtion)이 재생될때의 시간차에 대한 함수를 지정합니다. 예를 들어 단순히 animation-duration: 2s 라고 했을때는 기본값인 ease가 적용되 처음에는 느리게 가다가 점점 빠르게 진행되고 마지막 순간 다시 느려지는 다음과 같은 형태의 시간차가 적용됩니다.(ease 참고)


만일 처음부터 끝까지 일정한 시간차로의 변형이 요구되는 경우라면 linear 형태가 알맞을 것이며 해당 속성을 다음과 같이 지정하면 됩니다.
#test_div {
   width: 500px;
   background-color: blue;

   animation-name: ani;
   animation-duration: 5s;
   animation-timing-function: linear;
}
마찬가지로 특정 곡선이 아닌 임의의 시간차를 그릴 필요가 있다면 cubic-bezier 함수를 사용합니다.
animation-duration: 5s;
animation-timing-function: cubic-bezier(1,.01,.64,1);
참고로 cubic-bezier 함수에 담겨질 값은 http://cubic-bezier.com/ 사이트(site)를 이용하면 편리하게 생성할 수 있습니다.

7. animation-direction

animation-iteration-count 속성이 애니메이션(animation)이 반복되도록 반복횟수를 지정하는 경우라면 animation-direction은 어떤 형식으로 반복할지에 대한 반복형식을 지정하는 속성입니다.

이 속성의 값을 normal(기본값)으로 하는 경우 from에서 to로의 반복을 수행하지만 alternate로 지정하는 경우 from에서 to로 갔다가 다시 to에서 from으로 가도록 합니다.

참고로 animation-direction 속성이 제대로 동작하려면 animation-iteration-count 속성에 반복횟수가 지정되어 있어야 합니다.

8. animation

위 1~6번까지의 모든 속성을 한꺼번에 지정하려면 animation 속성을 사용합니다. animation 속성 사용형식은 다음과 같습니다.

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction>;
animation: ani 5s linear none 1 normal;
▶animation 속성 작성 예
0 0