티스토리 뷰
발생일: 2013.11.07
키워드: CSS3, 트랜지션, 애니메이션, transition, animation
문제:
얼마 전 회사 해커톤에선 립모션으로 비트박스를 만드는 걸 만들었었다.ㅎㅎ
손가락으로 특정 비트를 선택하서 요기로 저기로 보내는 컨셉이었는데,
커서에 글로우 효과가 계속 되도록 애니메이션을 주고 싶었다.
최근엔 CSS3는 많이 다뤄본 적이 없어서,
트랜지션 속성을 쓰는 게 나을 지 애니메이션 속성을 쓰는 게 나을지 고민하면서
메모해둔 게 있어 옮겨둔다.
해결책:
http://www.kirupa.com/html5/css3_animations_vs_transitions.htm
트랜지션은 CSS 프로퍼티에 의해서만 발생한다.
:hover 같은 슈도 클래스에 의해서이거나, 클래스를 넣고 빼는 등의 동작에 의해서이다.
물론 엘리먼트의 인라인 스타일을 변경해서도 동작하게 할 수 있다.
애니메이션은 시작하기 위해 별도의 설정이 필요없다.
한 번 정의하면 자동으로 시작한다.
애니메이션은 `animation-iteration-count` 속성으로 쉽게 반복할 수 있지만,
트랜지션은 이런 속성이 없다.
트랜지션은 한 번만 발생한다. (필요하다면 스크립트에서 `transitionEnd` 이벤트를 받는다)
애니메이션은 키프레임을 지정할 수 있다.
트랜지션은 할 수 없다.
트랜지션을 활용한 인터랙션.
클릭할 때 ease-in 이 적용된다.
http://www.kirupa.com/snippets/move_element_to_click_position.htm
CSS의 transition 프로퍼티가 특정 속성을 listen 하고 있기 때문에,
자바스크립트에서는 그 값만 수정해도 트랜지션이 적용된다.