트랜지션과 애니메이션 3 - 애니메이션 알아보기

앞에서 배운 CSS 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있었지만 CSS3의 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다.

---

 
 
 

CSS 애니메이션에서 사용하는 속성

CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 키프레임은 @keyframes 속성으로 정의하고, animaiton 속성과 그 하위 속성을 이용하여 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.
 
아래 표는 animation 관련 속성을 정리한 것이다.

 
 

1. 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성

애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.

@keyframes <이름> {
  <선택자> { <스타일> }
}

 
또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 한다. 이때 animation-name 속성으로 어떤 애니메이션을 사용할지 구분한다.

animation-name: <키프레임 이름> | none

 
 
@keyframes 속성이세 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킨다. 예를 들어 애니메이션 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 추가하면 된다. 시작과 끝 위치만 사용하려면 수치 대신 from과 to라는 키워드를 사용해도 된다.

---

 
 
 

2. 애니메이션의 실행 시간을 지정하는 animation-duration 속성

이 속성은 애니메이션을 얼마 동안 재생할지 설정한다.

animation-duration: <시간>

 
animation-duration 속성에서 사용할 수 있는 값은 초나 밀리초와 같은 시간 단위이다. 기본값은 0이므로 속성값을 정하지 않으면 애니메이션은 실행되지 않는다.
 
 
 
다음 예제는 @keyframes을 이용하여 shape와 rotate라는 애니메이션을 각각 정의한다. 그리고 #box1과 #box2에 각각 animation-name: shape와 animation-name: rotate를 사용해 애니메이션을 각각 실행한다. 이 애니메이션은 한번 만 실행하므로 재실행하려면 F5를 눌러 문서를 다시 불러와야 한다.
 

애니메이션의 지점, 이름, 실행 시간 적용하기

 

 

 
정말로 한 번 실행한 뒤에서 멈추어서 F5를 눌러 다시 실행해보았다.

---

 
 
 
 

3. 애니메이션의 방향을 지정하는 animation-direction 속성

애니메이션은 기본적으로 keyframes에서 정의한 from에서 to 순서로 진행하는데 animation-direction 속성을 사용해서 진행 방향을 바꿀 수 있다.

---

 
 
 

4. 반복 횟수를 지정하는 animation-iteration-count 속성

상황에 따라 애니메이션을 반복해서 보여줘야 할 때는 이 속성을 사용해 반복 횟수를 지정한다.

---

 
 
 

5. 애니메이션 속도 곡선을 지정하는 animation-timing-function 속성

트랜지션과 마찬가지로 animation에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있다.

 
 
 
다음 예제는 앞에서 작성한 코드에 animation-timing-function 속성을 추가하여 애니메이션을 무한 반복하게 만든다.

 

 
정말로 애니메이션이 무한 반복되고 있다.

---

 
 
 
 

6. 애니메이션 속성을 한꺼번에 표기하는 animation 속성

지금까지 배운 속성을 한꺼번에 표기하는 방법이 있다. 주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 점이다. 애니메이션 실행 시간을 지정하지 않으면 기본값으로 0이 적용되어 애니메이션 효과를 볼 수 없기 때문이다.

 
 
다음 예제는 rotate와 background 애니메이션을 동시에 실행한다. animation 속성을 사 용하면 간단하게 표현할 수 있으므로 쉼표로 구분하여 둘 이상의 애니메이션을 실행할 수 있다.

 

 
background 애니메이션은 처음에는 빨간색, 중간에는 초록색, 마지막에는 파란색 배경으로 바뀐다.
 

---

 
 
 

학습을 마치고

애니메이션 관련 속성에 대해서도 모두 학습해보았다. 애니메이션과 트랜잭션은 유사한 속성들이 많았다. 이제 단원 마무리 문제만 풀면 이 단원 학습도 끝이 난다. 
저녁식사 전까지 충분히 공부를 마칠 수 있을 것 같다.