애니메이션 알아보기

트랜스폼과 트랜지션 등으로 애니메이션 효과를 만들 수도 있지만, animation 속성을 이용하면 더욱 쉽게 애니메이션을 만들 수 있다.

CSS와 애니메이션

자바스크립트나 플래시 대신에 웹 요소에 애니메이션을 추가하는 기능이다. 트랜지션과 비슷한 점은 시작부터 끝 스타일까지의 스타일을 지정한다는 점이다. 하지만 애니메이션은 원하는 곳에 스타일을 바꾸며 애니메이션을 적용할 수 있다는 점에서 다르다. (여기서 사용하는 개념이 keyframes)

• @keyframes : 지점 설정하기

시작과 끝을 비롯해 상태가 바뀌는 부분에 이 속성을 이용하여 지정한다.

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

이름으로 애니메이션을 구분하고 선택자로 속성 값이 바뀌는 지점을 선택해준다. 백분율 혹은 from ~ to를 사용할 수 있다.

• animation-name : 이름 정하기

말 그대로 애니메이션의 이름을 정하는 속성이다. 위 예제처럼 change-bg라는 이름을 붙여 사용한다.

• animation-direction : 방향 지정

원래 위치로 되돌리거나 반대 방향으로 애니메이션을 한 번 더 실행시킬 수 있다. 속성값으로는 normal(원래 위치로 , 기본값), alternate(왔던 방향으로 되돌아감)

• animation-iteration-count : 반복 횟수 지정하기

애니메이션이 실행되는 횟수를 지정한다. 숫자로 지정할 수 있고 infinite(무한)반복이 가능하다.

• animation-timing-function : 속도 곡선 지정하기

시작과 중간 끝에 속도를 선택해서 전체적인 속도를 지정할 수 있다.

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier

• animation : 한 번에 설정하기

이것저것 다 지정하면 엄청 긴 코드가 작성될 것이다. 그냥 한 번에 쓰자. 하지만 주의할 점은 animation-duration은 반드시 표기를 하여야 한다. 실행 시간을 지정하지 않으면 기본 값인 0이 지정되기 때문에 애니메이션 효과를 볼 수 없다. 또한 시간 관련 된 값이 2개라면 첫 번째는 animation-time, 두 번째는 animation-delay로 인지한다.