[CSS] 애니메이션 효과 : Animation

1. Transition과 Animation의 차이점

Transition 속성은 주로 특정 이벤트 발생에 반응하여 아이템의 간단한 상태를 전환할 목적으로 사용됩니다. 그리고 Animation은 좀 더 세부적인 상태 전환을 가능하게 하며, 반복과 무한 루프 등의 효과를 줄 수 있기 때문에 웹페이지에서 반복적으로 움직이는 로고 및 캐릭터의 움직임을 표현해 내는데 주로 사용됩니다.

2. Animation을 만드는 방법

애니메이션을 만드는 방법으로 @keyframe 쿼리를 사용하는데요. 이 쿼리를 이용해 특정 콘텐츠의 변화 과정을 보다 세밀하게 정의할 수 있습니다.

이때 구간을 설정하는 방법은 크게 from-to 방법과 % 정의 방법으로 나누어지게 되는데, from-to의 경우 컨텐츠의 처음 상태와 마지막 상태 두 가지 구역만 지정을 하는 방법이라 Transition과 거의 비슷하게 동작이 되고요.

반면 구간을 %로 나누어 컨텐츠의 상태들을 지정하게 될 경우 애니메이션이 실행될 동안 단계적으로 정의된 애니메이션의 상태들이 실행되기 때문에 세밀한 동작을 정의하고 싶을 경우 %로 해당 컨텐츠의 스테이츠 변경을 지정해주면 됩니다.

3. Animation의 기본값들

1. animation-name: 애니메이션에 사용될 @keyframes 규칙의 이름을 지정합니다.

2. animation-duration: 애니메이션의 지속 시간을 지정합니다. 시간 값은 초(s) 또는 밀리초(ms) 단위로 표시됩니다.

3. animation-direction: 애니메이션의 방향을 지정합니다. normal, reverse, alternate,alternate-reverse 등의 값이 사용됩니다. 애니메이션의 진행 순서를 설정합니다.

4. animation-timing-function: 애니메이션의 타이밍 함수를 지정합니다.
   linear, ease, ease-in, ease-out, ease-in-out, steps, cubic-bezier 등의 값이 사용되며, 각 값은 애니메이션의 시간에 따른 속도 변화를 나타내며 Transition의 함수와 사용이 동일합니다.

5. animation-delay: 애니메이션 시작 전에 대기할 시간을 지정합니다. 시간 값은 초(s) 또는 밀리초(ms) 단위로 표시됩니다.

6. animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다. infinite로 설정하면 무한 반복됩니다.

7. animation-fill-mode: 애니메이션 실행 전과 후의 스타일을 지정합니다. none, forwards, backwards, both 등의 값이 사용됩니다.

8. animation-play-state: 애니메이션의 재생/일시정지 상태를 지정합니다. running, paused 등의 값이 사용됩니다.

⭐ 보다 자세한 사용법은 해당 사이트를 참조하시기 바랍니다.