[CSS] Chapter 15. Animation

1. 개요

Animation은 CSS3에 추가된 기능으로 오브젝트의 모양을 동적으로 변화시키는 '기능'을 한다.

본래 JavaScript를 통해 구현하던 동적인 움직임을 CSS에서 부여할 수 있다는 강점이 있으나 CSS3에서 지원하는 기능이므로 호환 브라우저가 상대적으로 적다. 

 

물론 HTML5를 지원하는 브라우저라면 해당 기능을 대부분 지원하고 있으며, 지속적으로 브라우저가 발전하면 범용성 있게 사용할 수 있는 기술이므로 익혀두는 것을 권장한다. 

 

2. 애니매이션을 적용하는 방법

CSS 애니매이션은 여느 스타일과 같이 특정 속성을 부터하는 것으로 진행한다. 

사용하는 속성은 animation 속성이며 animation에 대한 자세한 값을 할당하여 동적인 움직임을 부여한다. 

다만 animation은 상태의 변화에 대한 '중간 값' 혹은 '세부 값'을 상태별로 지정하지 못한다는 단점이 있으며, 이러한 문제를 해결하기 위해서 @keyframe을 사용한다. 

 

1) animation-delay 

요소가 시작되기까지의 시간을 설정할 수 있다. 시간 단위는 s로 지정한다. (초: Second)

 

2) animation-direction

애니매이션의 종료 후 첨음부터 시작할지 혹은 역방향으로 시작할지 설정할 수 있다. 

 

3) animation-duration

애니매이션 동작의 한 싸이클(1반복주기)가 몇 초에 걸쳐 발생할지 설정할 수 있다. 단위는 s로 지정한다. 

 

4) animation-iteration-count

애니매이션의 반복 횟수를 지정할 수 있다. infinite로 지정하면 무한히 반복한다. 

 

5) animation-name 

해당 애니매이션의 중간 상태를 지정한다. 중간 상태는 @ketframe 규칙을 이용한다. 

 

6) animation-play-state 

애니매이션을 멈추거 다시 시작할 수 있다. 

 

7) animation-timing-function 

중간 상태의 전환을 어떤 시간 간격으로 진행할지 지정한다. 

 

8) animation-fill-mode

애니매이션이 시작되기 전이나 끝난 후 어떤 값이 적용될지 지정한다. 

 

3. @keyframe을 사용하여 animation의 중간 상태 설정하기 

@keyframes을 이용하면 두개 이상의 중간 상태를 설정할 수 있다.

시작 상태를 0%(혹은 from), 마무리 상태를 100%(혹은 to)로 하여 사이값을 지정하면 세부적인 동적 움직임을 지정할 수 있다.

 

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

 

위의 예시 코드와 같이 from 및 to로 값을 지정하고 중간 값 또한 설정이 가능하다. 

다른 CSS 속성과 같으므로 JavaScript를 이용한 이벤트 설정 또한 가능하지만, 해당 기능은 CSS로 JavaScript를 이용하지 않고도 동적 움직임을 부여하는 것이 가능하기 때문에 편한 방법으로 사용하자.

 

다만 애니매이션 효과는 사용자에게 최적의 효과를 제공한다고 보장하는 것은 아니므로 남발하지 말아야한다.