CSS 애니메이션 (CSS Animation)를 만드는 방법

CSS3 애니메이션은 과거의 웹 환경에서는 Flash, Animation GIF 등을 이용하여 애니메이션을 실현시켰습니다만, 지금은 CSS와 JavaScript만으로 여러 애니메이션이 가능하게 되었습니다.

CSS 애니메이션은 언뜻 복잡하게 보이지만, 애니메이션의 기본 구성은 간단합니다. 먼저 애니메이션을 정의한 후, 특정 HTML 요소에 그것을 할당하기만 하면 됩니다.

이것은 애니메이션 관해 기술(記述)하는 스타일과, 애니메이션의 시작과 종료의 CSS 스타일을 설정하는 키 프레임(keyframe)으로 만들 수 있습니다.

@keyframe 규칙을 정의(定義)하기

CSS 애니메이션은 「색」「배경색」「폭」「높이」등의 많은 CSS 속성을 애니메이션에 사용할 수 있습니다.

각 애니메이션은, 3D CG 애니메이션처럼 키 프레임 "@keyframes"의 규칙으로 정의할 필요가 있습니다.

그것은 애니메이션 중에 특정 시간에 무엇을 어떻게 할 것인가를 정의합니다.

스폰서 링크

각각의 키 프레임은 애니메이션의 흐름 속에서 요소가 어떻게 표현될 지를 기술합니다. CSS 스타일에서 애니메이션의 타이밍을 정의하기 위해 키 프레임을 백분율(percentage)로 지정하고, 애니메이션의 흐름 속에서 언제 그 스타일이 적용되는지를 보여줍니다.

CSS 애니메이션의 흐름(순서)를 만들려면 @keyframe 선언 내에서 각각의 키 프레임(keyframe)을 정의하는 두 가지 방법이 있습니다.

하나는 "from"와 "to"의 키워드 또는 "%: 퍼센트"로 표시합니다.

이것을 사용하여 애니메이션을 적용시키고 싶은 요소에 애니메이션의 재생 시간과 길이, 그리고 애니메이션을 어떻게 진행시켜 나갈지 에 대한 자세한 사항 등의 animation 속성을 설정합니다.

예를 들어, 전철 애니메이션을 제작하는 경우 아래와 같이 키 프레임에 "%: 퍼센트"를 클릭합니다.

백분율을 사용하여 키 프레임을 정의하려면 0%의 키 프레임에서 시작하여 100%까지 동작을 작성합니다.

0%와 100% 사이의 임의의 비율을 사용한 동작은 보다 더 많은 유연성을 유지합니다. 또한 "from"와 "to" 키워드와 혼합하여 사용할 수 있습니다.

@keyframes speed {
　0% {transform: translateX(0);}
　100% {transform: translateX(650px);}
}
  </style>

"0%"와 "100%"의 백분율 대신에, 각 키워드의 "from"와 "to"로 바꿔 슬 수 있습니다.

@keyframes speed {
　from {transform: translateX(0);}
　to {transform: translateX(650px);}
}
  </style>

키 프레임의 선언 블록을 만들었으면 이제 HTML 요소에 애니메이션을 할당할 준비가 되었습니다. 여기에 애니메이션 속성의 목록을 간단하게 소개합니다.

스폰서 링크

animation-delay	읽어들일 요소와 애니메이션이 시작할 때까지의 대기 시간을 설정한다.
animation-direction	애니메이션의 사이클이 완료될 때, 반대 방향으로 애니메이션을 반복하거나 시작 상태로 재설정하여 애니메이션을 반복할 지 여부를 설정한다.
animation-duration	1회 애니메이션 사이클에 걸리는 시간의 길이를 설정한다.
animation-iteration-count	애니메이션을 실행하는 횟수를 설정한다.
animation-name	애니메이션 작업에 필요한 키 프레임 @keyframes 규칙의 이름을 지정한다.
animation-play-state	애니메이션을 일시 정지하거나 재생하도록 설정한다.
animation-timing-function	애니메이션의 진행 방식을 설정한다. "ease"와 "linear" 같은 가속 곡선을 정의함으로써, 키 프레임 사이의 애니메이션을 어떻게 진행시켜 나가는지를 나타냅니다.
animation-fill-mode	애니메이션의 실행 전후에 "속성 값"을 어떻게 적용시킬 지 여부를 설정한다.

 <style>
　.plane {
　　animation-name: speed;
　　animation-duration:2s;
　}
 </style>

animation-name: speed;

요소에 키 프레임 애니메이션을 적용시킬 때, 애니메이션 이름(위의 경우, speed)를 지정한다.

animation-duration:2s;

1회 애니메이션을 재생할 지속 시간(위의 경우, 2초)을 설정한다.

그러면, 위의 CSS를 HTML 이미지 요소에 할당해 보겠습니다.

  <body>
    <img src="/images/plane.png" class="plane">
  </body>

  <body>
    <img src="/images/plane.png" class="plane">
  </body>

.train {
animation-name: speed;
animation-duration: 2s;
}

@keyframes speed {
0% {transform: translate(0);}
to {transform: translate(650px);}
}

스폰서 링크