간단 설명
transition보다 더 정교한 애니메이션이 가능합니다.
그렇다 하더라도 10초 이상의 만화영화 같은 애니메이션은 설계 및 제작이 힘듭니다.
5초 이내 또는 단순 무한 반복(loop) 애니메이션을 제작할때만 추천합니다.
2D, 3D transform과 같이 사용할 수 있습니다.
페이지가 로드되면서 자동 시작될 수 있습니다.
click, hover, focus등의 이벤트가 없어도 애니메이션을 작동시킬 수 있습니다.

Animation 종합 예제

하단의 예제만으로 이해가 된다면 밑의 설명글은 굳이 필요 없습니다.

  • @keygrames myName {

    0% { left: 0; background-color: blue; }

    100% { left: 100%; background-color: pink; }

    }

    .box {

    position: absolute; left: 50%; top: 100px;

    width: 100px; height: 100px;

    animation: myName 2s infinite ease-in-out alternate both 0s;

    }

Animation & @keyframes Ruls

항상 animation의 모든 속성을 사용하는 것은 아니지만, 필요할 때(적재적소에) 사용하려면 각 속성의 역할은 확실히 알아야 합니다.

초급에게는 어려울 수 있는 내용이므로 단순 반복 학습으로 천천히 이해하는 방법을 추천합니다.

CSS 구문

@keyframes myName {
0% { background-color: red; }
100% { background-color: blue; }
}
.box { animation: myName 1s ease-in-out alternate infinite; }
.box
  • animation은 @keyframes Rule과 반드시 같이 사용되어야 합니다.
  • @keyframes Rule은 객체가 시간의 흐름에 따라 어떻게 변형될 지 모양새에 관련된 선언하고,
  • animation은 transition과 마찬가지로 타이밍, 지연시간, 반복 등 움직임에 관한 선언을 합니다.
  • @keyframes Rule을 이용해서 애니메이션의 이름을 지어주어야 합니다.
    위 예문에서는 myName이라는 이름을 지정하였습니다.
    ※ 네이밍 규칙은 따로 없으므로 상황에 맞는 이름을 창작하면 됩니다.

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

@keyframes myName {
0% { background-color: pink; }
25% { background-color: brown; }
50% { background-color: red; }
75% { background-color: brown; }
100% { background-color: pink; }
}
@keyframes myName {
0%, 100% { background-color: pink; }
25%, 75% { background-color: brown; }
50% { background-color: red; }
}
  • 위 예문처럼 키프레임 단계를 세분화할 수 있으며, 각 키프레임 중 css의 속성이 정확히 겹치는 키프레임이 있다면 콤마(,)로 이어서 선언할 수 있습니다.
  • 각 키프레임의 시점을 %대신 from, to로도 선언할 수 있지만, 거의 사용하지 않으므로 예문에서 배제하였습니다.
    %로 사용할 것을 추천합니다.

Animation 속성 설명 및 선언 방법

1. 속성별 선언

.box {

animation-name: myName;

animation-duration: 4s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

animation-delay: 2s;

}

2. 속성 설명

속성의 이름이 길기 때문에 아래 속성 이름에서는 animation-부분을 생략했습니다. 실제 속성별로 선언할 때는 'animation-name' 이런 식으로 작성되어야 합니다.
버튼을 클릭하여 해당 속성의 값이 어떻게 작동되는지 확인할 수 있습니다.

  • 속성
  • 값

  • name
    (필수 선언)

    @keyframes Rule에서 선언한 애니메이션 이름을 적용합니다.
    이 페이지에서는 myName이라는 이름을 지어 사용했습니다. 값 : 당신이 @keyframes에 선언한 이름

  • duration
    (필수 선언)

    @keyframe Rule에서 선언한 0%부터 100%까지의 움직임을 몇 초에 걸쳐 구현할 지 선언합니다.
    1s는 1초이며, 0.1s는 숫자 0를 생략하고 .1s로 표기 가능합니다.
    (ms의 단위로 할 경우 1초 = 1000ms) 값 : #s or #ms

  • iteration-count

    애니메이션을 얼마나 반복시킬 지 정의합니다. 숫자(양의 정수)와 infinite(무한 반복)만 선언 가능합니다.
    만약 숫자 5를 선언하면 다섯번 반복 후 애니메이션이 정지됩니다.
    기본값은 1이며 기본값으로 사용할 경우 생략 가능합니다. 값 : 숫자(1~), infinite

  • direction

    애니메이션의 반복(loop)이 최소 2회 이상일 경우, 한 사이클(0% 부터 100%)이 종료되고 나서 다음 반복 때는 어떤 방향으로 움직임을 이어 나갈지 정의합니다.
    기본값은 normal이며 기본값으로 사용할 경우 생략 가능합니다. 값 : normal, alternate, reverse, alternate-reverse
    움직임 보기 :
    • normal : 한 사이클이 끝나도 같은 방향으로 움직입니다.
    • alternate : 한 사이클이 끝나면 역방향으로 움직입니다.
    • reverse : 처음부터 역방향으로 움직입니다.
    • alternate-reverse : 처음부터 역방향으로 움직이고, 한 사이클이 끝나면 정상 방향으로 움직입니다.(alternate의 반대)

  • timing-function

    변화의 시작과 끝 타이밍을 정의하며, 조금 더 정교한 또는 현실적인 움직임을 표현하기 위해 사용됩니다.
    기본값은 ease이며 기본값으로 사용할 경우 생략 가능합니다. 값 : ease, linear, ease-in, ease-out, ease-in-out, step(n), cubic-bezier(n,n,n,n)
    움직임 보기 :
    • ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝납니다.
    • linear : 모든 속도가 같은 등속 운동
    • ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동
    • ease-out : 일정한 속도의 등속으로 시작해서 점점 느려지면서 끝납니다.
    • ease-in-out : ease와 비슷하다. 느리게 시작하여 느리게 끝납니다.
    • steps(n) : 애니메이션의 흐름을 Step(단계)화해서 제어할 수 있습니다.

      아래 5. Steps 선언에서 자세히 다룹니다.

      아래 5. Steps 선언에서 자세히 다룹니다.

    • cubic-bezier(n,n,n,n) : 처음과 끝의 속도를 0과 1 사이의 수치를 이용하여 4단계로 지정할 수 있다. 베지어(Bezier)라는 곡선 운동을 정의합니다.
      https://easings.net/
      위 사이트에서 미리 만들어져있는 cubic-bezier 값을 가져다 쓰면 좋습니다.
      https://cubic-bezier.com/
      위 사이트에서는 cubic-bezier의 움직임을 직접 만들 수 있습니다.

  • fill-mode

    한 사이클의 애니메이션이 종료되고 난 후, 애니메이션의 상태를 정의합니다.
    기본값은 none이며 기본값으로 사용할 경우 생략 가능합니다. 값 : none, forwards, backwards, both
    @keyframes myName {
    0% { left: 0%; } //@keyframes 위치
    100% { left: 100%; }
    }
    .box {

    left: 50px; //css 위치

    animation: myName 2.5s ease;

    }
    움직임 보기 :
    • none : 대기(css 위치) > 시작(@keyframes 위치) > 종료(css 위치)
    • forwards : 대기(css 위치) > 시작(@keyframes 위치) > 종료(그대로 유지)
    • backwards : 대기(@keyframes 위치) > 시작(@keyframes 위치) > 종료(css 위치)
    • both : 대기(@keyframes 위치) > 시작(@keyframes 위치) > 종료(그대로 유지)

  • delay

    효과의 지연시간을 정의합니다.
    3s(3초)로 설정하면 이벤트 발생 후 3초 후에 animation이 작동됩니다.
    지연시간이 필요 없으면 생략 가능합니다. 값 : #s or #ms

  • play-state

    애니메이션 진행상태를 설정합니다. 초기화가 아닌 정지, 재생을 할 수 있습니다.
    필요한 상황에만 사용합니다. 값 : paused, running, initial, inherit
    @keyframes myName {
    0% { left: 0%; }
    100% { left: 100%; }
    }
    .box { animation: myName 3s ease infinite; }
    .box.paused { animation-play-state: paused; }
    .box.running { animation-play-state: running; }
    움직임 보기 :

    • paused : 애니메이션의 움직임을 정지시킵니다.
    • running : 정지된 애니메이션을 움직이게 합니다.
    • inherit : 애니메이션 움직임을 상위 요소한테 상속받습니다.
    • initial : 이 속성을 기본값으로 설정합니다.

3. 축약형 선언

transition과 마찬가지로 속성을 축약하여 선언할 수 있습니다.

.box {

animation: myName .5s 2s ease-in infinite alternate both;

}

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

.box {

animation: name duration delay timing-function iteration-count direction fill-mode;

}

4. 복수 선언

콤마(,)로 구분하여 두 개 이상의 @keyframes Rule로 정의 된 애니메이션을 한번에 선언할 수 있습니다.

.box {
animation:
myName1 .5s 1s ease,
myName2 1s 2s ease-in-out both;
}

5. Steps 선언

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


5-1. Steps 예제 (시계 초침)

.box { animation: myName 60s steps(60) linear infinite; }

steps() 미적용

초침

steps(60) 적용

초침

5-2. Steps 예제 (셀 애니)

.box { animation: myName .8s steps(10) infinite; }

steps() 미적용

steps(10) 적용