Animation - by. UXKM

4.3.1. animation 속성 요약

animation의 모든 속성 대한 요약 입니다. 아래 속성 설명에 각 속성에 대한 자세한 설명이 있습니다.

1. animation-name : 선언된 애니메이션(@keyframes) 이름 선언합니다.
2. animation-duration : ms 단위로 실행되는 시간을 지정합니다.
3. animation-timing-function : linear, ease 등의 시간에 따른 변화 가감속 속도를 지정합니다.
4. animation-iteration-count : 애니메이션의 반복 효과 횟수 지정합니다. (기본값은 1)
5. animation-direction : 애니메이션이 반복되는 동안 실행되는 순서를 지정합니다. (기본은 normal, 반대라면 alternate, 무한반복 infinite)
6. animation-delay : 애니메이션 실행 시작 전에 실행 지연(유예) 시간을 지정합니다.
7. animation-fill-mode : 애니메이션의 적용 후에 대상의 상태를 지정합니다. (backward, forward, both, none)
8. animation-play-state : 실행중인 애니메이션을 멈추거나 다시 재생할 수 있습니다.

4.3.2. animation 속성 상세

animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다.

• animation-name 속성 (필수 선언)

  애니메이션 효과의 이름을 설정합니다.
  해당 @keyframes 규칙에서 정의된 이름을 사용하고, 애니메이션 이름 속성에는 단 하나의 값만을 사용할 수 있습니다.
  이름 이외에 사용할 수 있는 값은 요소에서 애니메이션이 진행되는 것을 막는데 사용하는 none 뿐입니다.

  효과의 이름은 다른 이름과 중복이 되지 않는다는 조건하에 자유롭게 지정할 수 있습니다.

  div { animation-name: myName; } @keyframes myName { 0% { … } 100% { … } } /* 위의 myName은 예시이며 목적에 맞는 이름을 자유롭게 지정할 수 있습니다. */

• animation-duration 속성 (필수 선언)

  애니메이션 효과를 재생할 시간을 설정합니다.
  @keyframe Rule에서 선언한 0%부터 100%까지의 움직임을 몇 초에 걸쳐 구현할지를 정합니다.
  transition-duration 속성과 기능적으로 동일합니다.
  transition-duration 속성과 마찬가지로 시간 값으로는 ms 또는 s 단위를 사용할 수 있으며 애니메이션의 진행을 막는 의미로 0을 사용할 수 있습니다.
  (시간 값으로 음수를 적용한 경우 이 값은 0으로 간주됩니다.)

  div { animation-duration: 1s; /* 1s = 1000ms */ }

• animation-delay 속성

  애니메이션 효과가 나타나기까지의 지연 시간을 설정합니다.
  transition-delay 속성과 같은 역할을 담당하고 있습니다.
  transition-delay 속성에서도 ms 또는 s 단위의 시간 값을 사용하며, 이를 통해 애니메이션의 시작을 지연시킬 수 있습니다.
  여기서 0은 지연 시간 없이 시작한다는 의미이며, transition-duration 과 마찬가지로, 음수의 값을 사용하면 그 시간만큼 애니메이션을 건너뛰고 진행합니다.
  3s(3초)로 설정하면 이벤트 발생 후 3초 후에 animation이 작동됩니다.
  ※ 기본값은 0이며, 지연시간이 필요 없으면 생략 가능합니다.

  div { animation-delay: 1s; /* 1s = 1000ms */ }

• animation-iteration-count 속성

  애니메이션 효과가 몇 번 반복될지를 설정합니다.
  숫자(양의 정수)와 infinite(무한 반복)만 선언 가능합니다. 만약 숫자 5를 선언하면 다섯번 반복 후 애니메이션이 정지됩니다.
  기본적으로 단 한번만 재생(원래대로 돌아가는 것까지 포함하면 두 번 재생)되는 transition 효과와 달리, 애니메이션은 재생 횟수에 제한이 없습니다.
  값에 0이나 음수를 사용하면 애니메이션은 재생되지 않습니다.
  ※ 기본값은 1이며, 기본값으로 사용할 경우 생략 가능합니다.

  div { animation-iteration-count: count(숫자 또는 infinite); }
  1. 숫자를 사용하면 해당 횟수만큼 애니메이션이 반복되고, 기본 설정 값은 1이며 애니메이션은 처음부터 끝까지 재생된 뒤 멈추게 됩니다.
  2. infinite 값이 적용되면 애니메이션은 무한 반복되며, 다른 조건에 따라 이 값이 변경되지 않는 한 계속 반복됩니다.

• animation-direction 속성

  애니메이션의 진행 방향을 설정합니다.
  애니메이션의 반복(loop)이 최소 2회 이상일 경우, 한 사이클(0% 부터 100%)이 종료되고 나서 다음 반복 때는 어떤 방향으로 움직임을 이어 나갈지 정의합니다.
  애니메이션은 일반적으로 시작 키 프레임에서부터 마지막 키 프레임 순으로 순차적으로 재생(transition와 같이)되지만 역뱡향 또는 양방향으로 재생시킬 수도 있습니다.
  ※ 기본값은 normal이며, 기본값으로 사용할 경우 생략 가능합니다.

  div { animation-direction: normal | alternate | reverse | alternate-reverse; }
  1. normal : 기본값으로 한 사이클이 끝나도 같은 방향으로 움직입니다.
  2. alternate : 한 사이클이 끝나면 역방향으로 움직입니다.
  3. reverse : 처음부터 역방향으로 움직입니다.
  4. alternate-reverse : 처음부터 역방향으로 움직이고, 한 사이클이 끝나면 정상 방향으로 움직입니다.(alternate의 반대)

• animation-fill-mode 속성

  한 사이클의 애니메이션이 재생되기 전과 종료되고 난 후의 애니메이션 상태를 정의한다.
  애니메이션을 적용할 요소의 CSS 위치와 애니메이션 시작 위치가 다를 경우와 애니메이션이 한 번만 재생되는 경우,
  애니메이션이 재생 전 또는 종료 후 요소의 위치를 css기준으로 할지 @keygrames 기준으로 할지를 정의합니다.
  ※ 기본값은 none이며, 기본값으로 사용할 경우 생략 가능합니다.

  div { animation-fill-mode: normal | forwards | backwards | both; }
  1. normal : 기본값으로 한 사이클이 끝나도 같은 방향으로 움직입니다.

     대기(css 위치) > 시작(@keyframes 위치) > 종료(css 위치)

  2. forwards : 애니메이션 시작 전까지는 요소의 원래 위치에서 대기. 그리고 요소가 애니메이션 끝나는 위치에서 멈춥니다.

     대기(css 위치) > 시작(@keyframes 위치) > 종료(그대로 유지)

  3. backwards : 페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동, 끝나면 원래 위치로 돌아갑니다.

     대기(@keyframes 위치) > 시작(@keyframes 위치) > 종료(css 위치)

  4. both : 위 둘 효과를 모두 적용합니다.

     대기(@keyframes 위치) > 시작(@keyframes 위치) > 종료(그대로 유지)

  div { left: 50px; //대기(css 위치) animation-name: myName; animation-duration: 1s; animation-fill-mode: normal; } @keyframes myName { 0% { left: 0%; } //시작(@keyframes 위치) 100% { left: 100%; } }

• animation-play-state 속성

  애니메이션 효과의 재생 상태를 설정합니다. 초기화가 아닌 정지, 재생을 할 수 있으며 필요한 상황에만 사용합니다.
  animation-play-state는 스스로 작동되지 않으며, 마우스 오버(hover) 또는 javascript click 등의 이벤트가 있어야만 작동됩니다.
  애니메이션의 진행상황을 설정할 수 있는 animation-play-state 속성은 축약형 문법에 포함될 수 없으며, 문법은 다음과 같이 사용합니다.

  div { animation-play-state: paused | running | initial | inherit; }
  1. paused : 애니메이션의 움직임을 정지시킵니다.
  2. running : 정지된 애니메이션을 재생시킵니다.
  div { animation: myName 2.5s ease; } div.paused { animation-play-state: paused; } div.running { animation-play-state: running; } @keyframes myName { 0% { left: 0%; } 100% { left: 100%; } }

4.3.3. @keyframes 규칙

@keyframes 규칙 요약 설명

CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 합니다.
키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시합니다.
@keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화할 것입니다.
애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결해 주어야 합니다.

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

키프레임 단계를 세분화할 수 있으며, 각 키프레임 중 css의 속성이 정확히 겹치는 키프레임이 있다면 콤마(,)로 이어서 선언할 수 있습니다.
각 키프레임의 시점을 %대신 from, to로도 선언할 수 있지만, %로 사용할 것을 권장합니다.

4.3.4. animation 작성 방법

모든 animation 속성을 한줄로 축약하거나 각 속성별로 따로 선언할 수 있습니다.
축약현 선언에서 animation-delay를 선언하려면 반드시 animation-duration 뒤에 선언해야합니다.

• 속성별 선언

  속성별로 선언할 경우 선언 순서는 중요하지 않습니다.
  다만, 공동작업이나 추후 관리를 위해 축약형 선언의 순서에 맞춰 선언하는 것을 추천합니다.

  div { animation-name: myName; animation-duration: .5s; animation-timing-function: ease-in; animation-delay: 2s; animation-iteration-count: 5; animation-direction: alternate; }

• 축약형 선언

  주로 쓰이는 방법입니다.
  대부분 하나의 객체당 하나의 @keyframes에 대한 animation을 적용하므로 이 경우 코드절약을 위해 한줄로 사용하는 것이 좋습니다.

  div { animation: ; } /* 위의 작성 순서는 아내와 같습니다. */ div { animation: ; }

• 복수 선언

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

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

• Steps 선언

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

  div { animation-name: myName 60s steps(60) linear infinite; }