CSS - animation (애니메이션)

최근 github 개인 페이지를 만들면서 가장 기억에 남는 CSS효과였던 애니메이션 속성에 대해서 활용도가 많을 것 같아서 정리해봤다.

쉽게 애니메이션 효과를 줄 수 있기 때문에 알아두면 좋을 것 같다.

애니메이션을 이용한 CSS 효과

CSS3 애니메이션

애니메이션을 나타내는 CSS와 중간 상태를 나타내는 키프레임으로 이루어져 있다.

 

CSS 애니메이션의 장점

• 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다.
• CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 된다.
• 보이지 않는 엘리먼트에 대한 애니메이션은 업데이트를 줄여 부하를 최소화할 수 있다.

 

애니메이션 적용하기

animation 속성과 이 속성의 하위 속성을 지정해야 한다.
애니메이션의 총 시간과 반복 여부를 지정할 수 있다.
애니메이션 속성은 애니메이션의 중간 상태를 정해줄 수 없지만 @keyframes를 이용하여 중간 상태를 정해 줄 수 있다.

 

애니메이션 주요 속성

• animation
  • animation-delay : 엘리먼트가 로드되고 나서 애니메이션이 언제 시작될지 정할 수 있다.
  • animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
  • animation-duration : 한 사이클의 애니메이션 시간을 정할 수 있다.
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정한다. infinite로 지정하여 무한히 반복할 수 있다.
  • animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의(변수명 같은 느낌이다.)

 

애니메이션의 중간 상태 표현하기

'@keyframes'를 이용하여 중간 상태를 정해 줄 수 있다.
특정 시점에 엘리먼트가 어떻게 보일 지를 나타내 줄 수 있고 '%(percentage)'를 이용하여 지정한다.

animation-duration으로 지정한 시간을 기준으로
0% : 애니메이션의 시작하는 시점을 말한다.
100% : 애니메이션의 끝나는 시점을 말한다.
간혹 from, to를 이용해서 하는 경우도 있지만 시작 시점과 종료 시점 사이에 특정 시점을 지정하기 위해서 %로 표현하는 것이 더 좋다.

 

 

처음 보여준 CSS효과의 코드를 보면 아래와 같다.

 

indexBtn의 애니메이션, keyframes을 이용하였다.

2초에 한 사이클을 돌며, 무한히 반복되는 애니메이션이다. keyframes을 이용했기 때문에 name이 있어야 한다.

2초의 50% 1 초시에 원래 크기의 1.11배로 커지고 종료 시점에 다시 시작 시점의 크기로 돌아간다.

이 애니메이션을 무한히 반복한다는 내용의 코드이다.

 

---