CSS 애니메이션 파헤치기
웹브라우저가 발전하면서 CSS 애니메이션 관련 명세도 반영이 빨라지고, -webkit 같은 제조사 전용 속성(Vendor Specify Prefix)도 상당 수 필요 없게 되었다.
그리고 다양한 CSS 내장 메서드는 별도의 프레임워크 없이도 개발자나 디자이너의 요구를 폭넓게 지원하고 있다.
관련 글을 여러 개 작성하다보니 그 양이 상당하다는 생각이 들었다. 이 글에서 소개하는 연계 글들은 부담없이 필요할 때만 찾아보는 참고서 형태가 되기를 바랬지만 불가피하게 설명이 많은 부분이 있다.
포스트 리스트
CSS 애니메이션을 처음 접하는 사람이라도 자신이 필요한 속성부터 열람하기 바란다. 사전 지식이 필요한 경우에는 내부 링크로 처리해 놓았다.
잘 사용되지 않는 일부 속성값은 설명을 생략한 것이 있으니 MDN 문서도 함께 참고하면 좋다.
요소의 속성 상태변화를 이용한 애니메이션 방법 중 가장 중요한 부분으로, 기존에 정의한 스타일과 새로 정의한 스타일 사이의 변화를 애니메이션 할 것인지 결정하게 한다. :hover 가상 선택자에서 가장 빈번히 사용된다.
2차원 공간에서 요소의 좌표를 변형하여 문서의 흐름과 관계없이 형태와 위치를 바꾼다. 변경 전과 변경 후 좌표의 상태에 따라 CSS Transition, 자바스크립트 이벤트를 이용해 애니메이션 효과를 줄 수 있다.
3차원 공간에서 요소의 좌표를 변형하여 문서의 흐름과 관계없이 형태와 위치를 바꾼다. 변경 전과 변경 후 좌표의 상태에 따라 CSS Transition, 자바스크립트 이벤트를 이용해 애니메이션 효과를 줄 수 있다.
다수의 요소들이 가진 여러 스타일의 상태 변화를 통해 transition 속성 보다 복잡한 애니메이션을 구현한다. Keyframes 전용 규칙을 통해 요소의 스타일을 정의하고, animation 속성으로 각 요소의 스타일을 애니메이션 한다.