CSS 이론 채워 넣기 - 7. 애니메이션

1. 애니메이션이란?

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.

즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다.

• 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.
• 세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.

2. @keyframes

CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다. 이 rule을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다.

from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의

@keyframes move {
  /* 애니메이션 시작 시점 */
  from { left: 0; }
  /* 애니메이션 종료 시점 */
  to   { left: 300px; }
}

from, to 키워드 대신 %를 사용할 수 있다

@keyframes move {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}

3. animation 속성

3.1 animation-name

animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다.

3.2 animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

3.3 animation-timing-function

애니메이션 효과를 위한 수치 함수를 지정한다. 트랜지션의 함수를 참고

3.4 animation-delay

요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

3.5 animation-iteration-count

애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복 할 수 있다.

3.6 animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.

프로퍼티값 | 설명
|-|-|
normal | 기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.
reverse | to에서 from 방향으로 진행한다.
alternate | 홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse | 홀수번째는 reverse로, 짝수번째는 normal로 진행한다.

3.7 animation-fill-mode

애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.

프로퍼티값 | 상태 | 설명
|-|-|-|
none | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
| |종료 |애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
| forwards | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
| | 종료 | 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
| backwards | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
| | 종료 | 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
| both | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
| | 종료 | 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

3.8 animation-play-state

애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running이다.

3.9 animation

모든 애니메이션 프로퍼티를 한번에 지정하는 shorthand이다.

지정 방법은 다음과 같고 animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다.

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

참고

https://poiemaweb.com/css3-animation