Beautiful CSS

CSS Animation : keyframes & animation

CSS3 : Animation

Visual Design and Art School Logo Academy of Art University Logo
Related :

교육 카드 개설 현황

Channels :
Units :
Draft :

CSS3 : Animation

이야기에 앞서

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

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


이 카드를 통한 성취 목표

이 카드를 통해 여러분께 기대하는 성취 목표는 다음과 같습니다.
  • CSS에서 어떻게 애니메이션을 처리하는지 살펴봅니다.
  • CSS에서 애니메이션을 처리할 때 어떤 문제가 있는지 파악합니다.

CSS 구문

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

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

Keyframe Rule 속성 선언

Animation 속성 선언

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

  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로 작아집니다.


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


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

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


animation 속성

속성별 선언

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

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

animation properties
속성
name

움직임을 줄 모양새 즉, @keyframes Rule에서 선언한 애니메이션 이름을 넣어줍니다. 지금까지의 예문으로 보자면 myAnimation이 되겠죠.

duration

@keyframe Rule에서 선언한 0%부터 100%까지의 움직임을 몇 초에 걸쳐 구현할 지 선언합니다. (1s는 1초, 1ms는 0.1초입니다)

iteration-count

애니메이션을 얼마나 반복시킬 지 정의합니다. infinite를 기재하면 무한 반복합니다.

direction

애니메이션의 반복이 최소 2회 이상일 경우, 한 사이클(0% 부터 100%)이 종료되고 나서 다음 반복 때는 어떤 방향으로 움직임을 이어 나갈지 정의합니다. normal, alternate, reverse, alternate-reverse가 있습니다.

  • normal : 한 사이클이 끝나도 같은 방향으로 움직입니다. 시계 바늘을 생각하세요.
  • alternate : 한 사이클이 끝나면 역방향으로 움직입니다. 시계 추를 생각하세요.
  • reverse : 처음부터 역방향으로 움직입니다.
  • alternate-reverse : 처음부터 역방향으로 움직이고, 한 사이클이 끝나면 정상 방향으로 움직입니다. 한마디로, alternate의 반대 움직임입니다.
timing-function

키프레임 간의 영향력을 조절하여, 움직임에 긴장감을 줄 수 있습니다. Easing이라고 하는 이 기법에 대한 설명은 여기에서는 자세히 다루지 않습니다. 문서 하단을 참조하세요.

fill-mode

한 사이클의 애니메이션이 종료되고 난 후, 애니메이션의 상태를 정의합니다. 개념 자체는 간단한데 설명하기가 정말 애매모호한 속성입니다. 따라서 여기서는 원론적인 설명만 하고, 더 자세히 알아보고 싶다면 문서 하단을 참조하세요.

  • none : 대기(selector 위치) > 시작(@keygrame 위치) > 종료(selector 위치)
  • forwards : 대기(selector 위치) > 시작(@keygrame 위치) > 종료(그대로 유지)
  • backwards : 대기(keygrame 위치) > 시작(@keygrame 위치) > 종료(selector 위치)
  • both : 대기(keygrame 위치) > 시작(@keygrame 위치) > 종료(그대로 유지)
delay 애니메이션의 시작 지연시간을 정의합니다. 1초는 1s, 0.1초는 1ms 식으로 선언하면 됩니다.

단축형 작성법

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

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


복수 선언

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


Steps 선언

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

위 예문에서는, 오른 방향으로 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에 대해 알기 쉬운 예제와 함께 설명하고 있습니다.
  • 김경환

    여러가지 글을 읽고 많이 배우고 있습니다 :) 감사합니다 ~

    • beautifulcss

      별 말씀을요. CSS를 사용한 애니메이션은 활용도가 높지 않으니 그냥 상식선으로 한번 읽어두신 후, 나중에 간간히 필요할때 참고서 방식으로 찾아 쓰면 됩니다.