Animation - by. UXKM

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 : 실행중인 애니메이션을 멈추거나 다시 재생할 수 있습니다.

animation 속성 상세

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

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

  애니메이션 효과의 이름을 설정합니다.
  @keyframes 규칙에서 정의된 이름을 사용하며, 여러 개의 애니메이션 이름을 콤마(,)로 구분하여 사용할 수 있습니다.
  애니메이션을 막으려면 none을 사용합니다.

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

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

  애니메이션 효과를 재생할 시간을 설정합니다.
  @keyframes에서 선언한 0%부터 100%까지의 움직임을 몇 초에 걸쳐 구현할지를 정합니다.
  ms 또는 s 단위를 사용하며, 음수 값은 0으로 간주됩니다.

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

• animation-delay 속성

  애니메이션 효과가 나타나기까지의 지연 시간을 설정하며, ms 또는 s 단위를 사용합니다.
  양수 값은 그만큼 지연 시간을 의미하며, 음수 값을 사용하면 애니메이션이 즉시 시작되며 애니메이션의 중간 지점부터 재생됩니다. 예를 들어, animation-duration: 5s이고 animation-delay: -2s인 경우, 애니메이션은 즉시 시작되지만 2초 지점(40%)부터 재생됩니다.
  ※ 기본값은 0이며, 지연시간이 필요 없으면 생략 가능합니다.

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

• animation-iteration-count 속성

  애니메이션 효과가 몇 번 반복될지를 설정합니다.
  숫자(양의 정수)와 infinite(무한 반복)만 선언 가능하며, 0이나 음수는 재생되지 않습니다.
  ※ 기본값은 1이며, 기본값으로 사용할 경우 생략 가능합니다.

  div { animation-iteration-count: count(숫자 또는 infinite); }

• animation-direction 속성

  애니메이션의 진행 방향을 설정합니다.
  한 사이클(0%부터 100%)이 종료된 후 다음 반복 때 어떤 방향으로 움직임을 이어 나갈지 정의합니다.
  ※ 기본값은 normal이며, 기본값으로 사용할 경우 생략 가능합니다.

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

• animation-fill-mode 속성

  애니메이션이 재생되기 전과 종료된 후의 요소 상태를 정의합니다.
  기본적으로 애니메이션이 시작되기 전에는 요소의 원래 CSS 위치에 있고, 종료 후에는 다시 원래 위치로 돌아갑니다. 하지만 애니메이션이 끝난 후 최종 상태를 유지하거나, 시작 전에 첫 번째 키프레임 상태로 미리 설정하고 싶을 때 이 속성을 사용합니다.
  요소의 CSS 위치와 @keyframes 위치 중 어느 것을 기준으로 할지 결정합니다.
  ※ 기본값은 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 속성

  애니메이션 효과의 재생 상태를 설정합니다. 정지(paused)와 재생(running)을 제어할 수 있으며, 마우스 오버(hover) 또는 JavaScript 이벤트와 함께 사용합니다.
  이 속성은 축약형 문법에 포함될 수 없습니다.

  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%; } }

@keyframes 규칙

@keyframes 규칙 요약 설명

CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 키 프레임(@keyframes)을 정의해야 합니다.
키 프레임에는 특정한 시간에 요소가 가져야 할 CSS 스타일을 명시하며, 중간 프레임의 움직임은 자동으로 처리됩니다.
애니메이션 효과가 동작하기 위해서는 animation-name 속성을 이용하여 요소와 키 프레임을 연결해야 합니다.

키 프레임 단계를 세분화할 수 있으며, CSS 속성이 동일한 키 프레임은 콤마(,)로 그룹화할 수 있습니다.
시점은 % 또는 from, to로 선언할 수 있으며, % 사용을 권장합니다.

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 규칙으로 정의된 애니메이션을 한 번에 선언할 수 있습니다.

  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; }

접근성: prefers-reduced-motion

일부 사용자는 움직임이나 애니메이션으로 인해 어지러움, 메스꺼움, 집중력 저하 등의 문제를 경험할 수 있습니다.
prefers-reduced-motion 미디어 쿼리를 사용하면 사용자의 시스템 설정을 확인하여 애니메이션을 줄이거나 비활성화할 수 있습니다.

사용자가 시스템 설정에서 "움직임 줄이기" 옵션을 활성화하면, prefers-reduced-motion: reduce가 적용됩니다.

권장사항: 모든 animation에 대해 prefers-reduced-motion을 고려하여 접근성을 향상시키세요.