[CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 1

 

 

 

 

CSS3에서는 앞서 배웠던 transition(트랜지션)을 통해서도 여러 애니메이션을 만들 수 있지만, animation(애니메이션) 속성을 활용해서도 자바스크립트 없이 더 쉽게 애니메이션을 구현할 수 있습니다. 

 

animation속성을 구현하는 구조는 약간 복잡하게 느껴질 수 있습니다. 우선, 어떤 요소에서 애니메이션을 구현할 때 해당 요소에서 기본적인 애니메이션의 속성을 transition과 비슷한 형태로 선언합니다. 그리고, animation 속성의 고유한 특징인 "key frames(키 프레임)"을 사용해 중간에 스타일이 바뀌는 지점을 따로 정의하게 됩니다. 

 

 

예를 들어 구조를 설명해 볼까요? 요소 중 'box'가 있고 해당 box라는 요소의 속성과 적용하고자 하는 애니메이션이 아래와 같다고 가정해 보겠습니다. 

 

* 요소 box의 속성
  - 붉은색이며 검은색 테두리가 있다.
  - 이 요소에 적용할 애니메이션의 이름은 shape이며, 이 애니메이션은 3초 동안 재생한다.

 

우리는 CSS에서 요소 'box'에 대해 위와 같은 속성을 정의하게 됩니다. 그리고 key frames를 통해서 위 요소에 적용될 애니메이션의 구체적인 형태를 선언하게 되는 것입니다. 

 

* 키 프레임을 통한 shape 선언
  - 애니메이션 shape는 2px짜리 직선 테두리에서 1px짜리 노란 테두리로 변하게 된다.

 

자, 위의 요소 box에서 정의된 내용에 키 프레임을 통해서 애니메이션이 어떻게 적용될지를 선언했습니다. 요소에서 선언한 애니메이션 이름이 있고, 이 애니메이션의 구체적인 움직임을 별도로 적용해 주는 형태가 되는 것이지요. 기본적인 animation 속성의 동작 구조가 이해가 가시나요? 

 

 

 

---

 

 

뭔가 복잡해 보였지만, 위의 구조를 이해했다면 지금부터는 각각의 속성에 대해서 기존의 CSS 속성과 비슷한 형태로 살펴보도록 하겠습니다. 우선, animation 속성의 종류에 대해서 보겠습니다. 

 

종류	설명
animation-delay	애니메이션의 시작 시간 정의
animation-direction	애니메이션 종료 시 처음부터 시작할지, 역으로 진행할지 정의
animation-duration	애니메이션 실행 시간 정의
animation-iteration-count	애니메이션 반복 횟수 정의
animation-name	@keyframes로 설정한 중간 상태를 정의
animation-timing-function	키프레임의 전환 형태를 정의
animation	animation 속성을 한번에 일괄 정의
@keyframes	애니메이션의 바뀌는 지정 정의

 

각 속성에 대한 상세 설명과 사용 예시는 다음 아티클에서 살펴보도록 하겠습니다.